Hello all, I am struggling to figure out why the layout on my site is completely out of whack on mobile. Here is the share link
https://preview.webflow.com/preview/cal-painting-plus?utm_medium=preview_link&utm_source=dashboard&utm_content=cal-painting-plus&preview=055013b92dbd196fc6deba9276d0e219&mode=preview
Any help would be much appreciated! Thanks!
Hey @ErichBoehm. Wow, lot’s of things going on here. But nothing un-fixable.
First of all, rule of thumb: ANYTIME you have a parent div, where you will put more divs and content inside of it, ALWAYS set the width, never leave it to Auto.
I usually always start with a Parent Div set to 100VW (that means no matter the screen size, the width will always be the exact screen size, no more, no less). Obviously I take into account margins so I add padding and so on, but that is a healthy first step. Then, the child div that is also a parent to more content (like a text wrap), I set that one to 100% (or whatever number you need, but never auto). Then inside of that Div, my content can be left to whatever I need it to be.
Those two changes alone will help you improve most of the current layout problems. (check screenshot as an example, here I also removed the margin from the text div I think).
Whenever you have elements that you need to have a set Pixel width, then just make sure the numbers (width+margins or padding) do not exceed the total width of your viewport (I hate math, but we cannot hide from it).
Also, final note in case you did not know (I only figured that out halfway into my first project), when you edit a viewport, the changes all apply to that viewport and the ones below it (If you edit an element’s width in Tablet, the numbers also apply to phone. You can then edit the phone viewport, and the changes will only happen there, without worrying about it change in the desktop or tablet viewport).
So go to your phone viewport and start editing there, it will look almost entirely better. After that, the other issues that need another solution will be clearer.
Hope this helps, cheers!
Thank you for your feedback! I am having some trouble with the slideshow and the footer at the bottom of the page. I set both to “100 vw” and they are both creating extra space on the right. Any idea what could be causing this? Thanks!
What I want is to have the “business hours”, “quick links” and the bit with the phone number neatly organized into 3 columns just as it is on the desktop version. Can this be done?
This is not the best way to go. 100vw will always produce horizontal scrollbars once your page is higher than your screen because vw’s don’t take scrollbar space into consideration while 100% does. Use 100% instead.
@dram Oh really? Never spotted that, I guess it depends on the content design? But thanks for the heads up, I’ll switch to that!
@ErichBoehm Well technically yes you could have them laid out in 3 columns next to each other, but it will be impossible to make them look good or readable, because you will have to reduce the font size (and it already is 13, which is the smallest recommended size for screen readability). If I may suggest another way, check out how they look in the screenshots. Here is what I did:
Cheers!
You could miss it if you have mac with scrollbars invisible until scrolled for example, or if your page is less than your screen height (scrollbars would be invisible, thus 100vw would work correctly).
The amount of times when someone asks here in the forums “why do I have this horizontal scrollbar” while having 100vw somewhere in their design is very high 
Hello,
Thanks for the advice! I think I am starting to figure this out! Helped a lot. I am noticing that the two divs at the bottom don’t seem to line up. Am I doing something wrong?
I am curious about what is causing this extra horizontal space as well.
Any recommendations as far as the services page? I want to make the descriptions take up more space horizontally so they aren’t so “stretched.” I am trying to stack the “Residential and commercial” on top of the service descriptions so things aren’t pushed so far out to the side.
Best regards,
Erich Boehm
The Section 15 Div (the copyright), give it -15 margin on the left, not 15. Although, a better solution would be to go back up to the “section” Div, remove the 15 margins on the sides, and only give margins to elements that need to be pushed away from the sides. (And keep the footer without the -15 margin). Again, just a preference, mathematically speaking, both can give the same result.
I guess that is all for this part.
As far as the services page, I think you should double check your margins also, and use the first display option instead of flexbox. After that, it’s just a matter of playing around with the margins (top, bottom, left and right) as well as the height of your divs, until you get a satisfactory design. It takes a while to get used to all the different options in webflow, I highly recommend you go to their youtube channel and watch all the tutorials. They helped me A LOT when I was starting out.
Cheers!
Thanks! Helps a lot! What were your settings for “Grid 13” and “Div Block 13?” When I change “Div Block 13” to “block,” the formatting is a little messed up.
Actually this Div 13 you can keep it as flex the way it was. But to center the content inside of it, I suggest you use “align center” (example on Grid 13 inscreenshot below).
Should look fine.
One issue that I am noticing with flex is that the “interior painting” and “exterior painting” headings end up on top of each other rather than their respective descriptions.
Okay, so last issue. I encountered a strange issue on the homepage. I have a blank space where content should be. Any ideas? Thanks you so much for all your help!
Whenever I view that same part in th desktop preview mode, and then switch over to portrait phone mode, it pops up just fine, but when I just preview it in phone mode, it just shows up as blank white space. What gives?
Actually for this div keep it the way it was before (you were using grid, correct?). Then position inside the grid whichever way you want.
Thanks, yeah, I was playing around with it the other day and I figured as much.
As for your other issue, this is because you have a “scroll into view” animation on some elements. So on mobile, I think the values of the animation go beyond the width? Or maybe because both the image/text as well as their parent Div have the animation, so they kind of double the values and move out of the screen?
I suggest you turn off the animation for mobile (just click on the viewport you want to de-activate). And if you need the animation on mobile too, just create a new, with different values, and de-activate it for desktop.
That did the trick! Would be nice if Webflow allowed you to adjust animations independently per break point!
Hello eliz0brown. Welcome to the community.
Not sure of the question (what apps?) or if it’s appropriate for this post. If your question is related to this post it’s ok, but if not, search the forum for your answer and if you don’t find it, create a new post. Be sure and give us a little more context with your questions. 
