Streaming live at 10am (PST)

[Urgent] Mobile responsiveness issue ><

Hi Webflow community~

I am an aspiring UX designer in Singapore, who’s completely new to building a website (other than Wix in the past which is quite different from Webflow). I have spent the past 3 months trying to create my portfolio from scratch, but met with many roadblocks. I am still not familiar with how things work in the Designer even after watching countless Webflow University videos, but finally could get my desktop site to fall into place.

But right now, the biggest issue i have is with the responsiveness between desktop, mobile and tablet versions. My current mobile version just has everything overflowing out of the screen, with a weird page size, and i cant figure out why.

Hope that someone here can help me solve this responsiveness issue, or advise a better layout for my text if needed, as i need to complete my portfolio ASAP…
Would greatly appreciate if someone could help to:

  • toggle my read-only version in the Designer and screen-record a video if possible (as i am quite confused with how the elements and settings work… ><), or
  • directly collaborate on my actual Designer to sort the issues out (i’d be happy to invite you as collaborator where necessary ><)

Here is my portfolio’s read-only link:
https://preview.webflow.com/preview/litingst?utm_medium=preview_link&utm_source=designer&utm_content=litingst&preview=9bdbbcf4db1828af2d6940a1d971e86b&pageId=5f873217d31875c18365f0fa&mode=preview
And my live site link to the project: Project - Slack

Thank you so much! >o<

1 Like

Hi Liting,

First you need to select the mobile view:image

All style changes made here will not change the view on the other screen-sizes.

Start by selecting the elements you want to change and work your way through the site to make it look nice.

I would suggest starting with the grid items and changing the “column-span”-property.
image

Right here:
image

Change the property to 2 on all elements in the grid. This will make the Titles span the whole grid and the paragraphs will align underneath them.

Here I changed the paragraph element aswell.
image

from 1 to 2.
image

This is the result:

On smaller screens it looks like this:

But if you change all the child elements in the grid from “1 column span” to “2 column span” it will look like this:

Keep working through the grid items on the whole page to make it look nice.

Hope that helps, Just shoot me a message if you need help with anything else.

Felix

1 Like

Thank you so much @felix_hellstrom for your fast response!
I have tried the columns trick and it worked for most elements! :smiley:

However there are some teething issues that still exist (please see the corresponding screenshots):

  1. I’m still unable to properly align my buttons grid and size (i want them to be slightly smaller - comfortable for the eyes, and aligned to be 3 rows of 2).


    This is an example i’d like achieve and i took this off the internet:

  2. The element class ‘Paragraph Tiny’ cant seem to be properly aligned below the previous element.

  3. There is a weird spacing/padding between all the ‘Work Position Wrap’ and ‘Paragraph Light’ classes.

Hope to seek your advice once again. Thank you so much! :slight_smile:

Hey again!

1.
First up this section
image

Name grid:
image

It has a max width set of 70%.
image

Just change that to 100%
image

And it will fill the page:

Then you have to style the grid items:
image

All you have to do is give it the proper sizing property:
image

This is what i used:
image

This is the result:

You can also use this setting:
image

Might be a bit cleaner:

2.
For the tiny paragraph select the “Work Position Wrap”-div
image

Give it a flexbox setting
image

Like so:
image

Then change the aligning from horizontal:
image

To vertical:
image

Then it looks like this:

3.
The weird padding you are talking about can be changed in the grid settings:
image

Press this icon:
image

And then change these settings:
image

You can reduce the row spacing for example:
image

like so:
image

Hope that helps

:smiley:

1 Like

Hi Felix,

Thank you once again for your timely help! All your pointers worked wonderfully~ :slight_smile:

Hope to seek further advice on issues with the tablet version that i couldn’t figure out… ><

  1. There seems to be extra rows and columns of the ‘Project Overview’ grid in the tablet version.
    Example: As seen in the settings panel (right side), there is an auto generated column that wasn’t present in other versions.

  2. Similarly for the ‘Project Description - DR’ grid, there are extra columns and rows, and the purple button became misaligned.

  3. Similarly here, there is an auto generated row which i couldn’t delete.

Thank you for looking through my messy work file, i really appreciate it. :smiley:
Wishing you a great weekend! :slight_smile:

Hi again liting!

You can fix this by specifying the column span of the grid-box elements. Just like I explained previously.
image

I would strongly suggest checking out this tutorial on grids so you learn how to solve these issues yourself :smiley:

Cheers
Felix