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