Streaming live at 10am (PST)

CSS grid going off mobile canvas

Hi webflow design gurus,

I designed a responsive one-page site with both grid and columns, and when viewing on mobile landscape and portraint, the full-width section that was designed with css grid is pushed outside of the browser width, out of alignment with the other full-width sections.

If you click on the live link (i published it here you will see the Projects section looks fine on desktop and tablet. When resizing to mobile, the Project section gets to be pushed to the right hand side off the mobile width.

I wonder what the issue might be. Below you can also find the read-only link to see for yourself.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hello @luciazw

Can you share your read-only link?

Piter :webflow_heart:

I also had grid problems, solved by making new object for mobile view :slight_smile:

I included the view-only link in the thread footer, pasting it here again:

Let me know if you can view it @PiterDimitrov

@Polarmesh did you delete the object for desktop/tablet? Because when I tried to do that for mobile, the content was lost for desktop/tablet. I made an entire section in grid.

@luciazw The container that your grid is in is also set to display: grid. I would put this back to display: block first off.

Then switch the height on the experience section to auto.

Your projects will then be back on the main screen and you can move them to the first columns in grid and this will get rid of your overflow. Let me know if you have any other questions or if you need any additional help.


Very helpfull :grinning::+1:
Thank you, solved all my problems!

1 Like

@sarahdarr you are my hero! It now works after switching the mobile grid container to display. I have no idea why it was set to display: grid in the first place, must have been a mistake!

1 Like

@luciazw Awesome! Glad I could help. Don’t forget to show us your finished product in the Show and Tell category!

1 Like