[Urgent] Mobile responsiveness issue ><

[liting]

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<

[felix_hellstrom (Felix Hellström)]

Hi Liting,

First you need to select the mobile view:

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.

Right here:

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.

from 1 to 2.

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

[liting]

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

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!

[felix_hellstrom (Felix Hellström)]

Hey again!

1.
First up this section

Name grid:

It has a max width set of 70%.

Just change that to 100%

And it will fill the page:

Then you have to style the grid items:

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

This is what i used:

This is the result:

You can also use this setting:

Might be a bit cleaner:

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

Give it a flexbox setting

Like so:

Then change the aligning from horizontal:

To vertical:

Then it looks like this:

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

Press this icon:

And then change these settings:

You can reduce the row spacing for example:

like so:

Hope that helps

[liting]

Hi Felix,

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

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.
Wishing you a great weekend!

[felix_hellstrom (Felix Hellström)]

Hi again liting!

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

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

Grid | Webflow University

Cheers
Felix