Streaming live at 10am (PST)

CSS grid going off mobile canvas


#1

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 https://onepageresume.webflow.io/) 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)


#2

Hello @luciazw

Can you share your read-only link?

Piter :webflow_heart:


#3

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


#4

I included the view-only link in the thread footer, pasting it here again:
https://preview.webflow.com/preview/onepageresume?utm_source=onepageresume&preview=49ef1ecd9b1ef3cc5d4801f6357e59c1

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.


#5

@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.


#6

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


#7

@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!


#8

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