Fix extra space on right on mobile that requires scrolling
MichelleGlauser opened this issue · 5 comments
Here is more of a description (from slack):
On some screens (like iPhone 11 Pro Max), the website will have an extra space that requires a vertical scroll. We're able to reproduce the error on the Responsive view on Chrome. See the gif.
But, sometimes, there is no error. If you try the website using Chrome on a pixel 4a (see video), the website looks just fine.
Maybe it's something related to the 100% width in the screen, but we already tried to change that and only helped the menu.
I have found the culprit. On style.css#L422, the definition of .row does not have a box-sizing. If you set it to box-sizing: border-box, it fixes this case.
This is a pretty fundamental change, though, so I'd recommend a little QA before just pushing it out.
I (or someone) needs to look a little further to see why this box-sizing is not used there, or perhaps more universally.
FWIW, I was not able to reproduce this in Chrome, but was able to do so in Firefox, using the responsive view set to 375px width.
Thank you soo much for this idea!!
I add the box-sizing:border-box to all the rows in the Css rules from the base template and it works!
I made a little video with the solution in my local environment
Do you have any other considerations? I would like to submit a pull request about this today!.
Thank you again for finding the culprit!
Merge: ac4b5b1 f4d954c
Author: Cristina Rodriguez yosola@gmail.com
Date: Thu Jul 29 10:29:18 2021 -0700
Merge pull request #218 from Techtonica/yosolita1978-fixmobile
Fixed weird text width in mobile
commit f4d954c (origin/yosolita1978-fixmobile, yosolita1978-fixmobile)