Hi, I’m using the Timber framework for a Shopify site and I have a layout that is wider than smartphone screens that it’s displayed on. I’ve been playing around for hours and just can’t see what the problem is. Would someone be able to help point me in the right direction?
https://firsttestshop-2.myshopify.com/
Thanks in advance!
It appears to be OK down to 314px, which should be fine for most mobiles, the smallest being about 320px.
Then horizontal scroll appear. I think the offending element is the top header with the cart icon going off the edge.
But I have yet to make sense of the grid system to see exactly why.
Thanks for the response. I initially thought that as well, but when I remove it, the problem still persists. In fact, I removed each section one by one, trying to narrow it down, with no luck.
I checked for a width of 360px and your button “More on our ingredients” has a width set at 300px, but its containing div has padding that pushes it over to the right and makes it overflow the screen.
#home-section-7-container .btn-container { margin-top: 55px; width: 300px;}
You might want to make that button fluid in width.
Thanks, I tried that and it’s hard to tell now. I think part of the the problem exists in the section where the four icons are (the baby, tree, etc). For some reason, now even though all 4 columns are identical (and 50%) width, the 4th one can’t fit in the grid.
I noticed that too, but couldn’t see anything else that might interfere. There might be an issue with rounding off when the 50% is calculated, so when you add the two actual pixel widths, the sum is slightly greater than the width of the container. Try switching from 50% to 49% or even 49.5% and see if that helps.
I’m not seeing a scrollbar until less than 300px so its not an issue for any mobile that I know.
However your btn-container is often too large for the element is sits in and pokes out in places.
Also your benefit containers snag at around 350px width and on an iphone are misaligned because the floats won’t wrap evenly. With floats you need to make sure each row is cleared properly or otherwise set a height that is the same for all floats (which is usually bad). This is why floats are awkward for fluid design most of the time as you have to massage them too much to make them work.
According to the HTML validator, there are a few errors (stray tags) that might be causing problems. Which mobile devices or mobile testing tool are you using?
Assigning {overflow:hidden} to an outermost container is a bad idea because it prevents triggering a horizontal scrollbar when there would be one because of excessive width within a layout. EXCEPT that it will not stop a horizontal scrollbar from appearing if elements with {position:absolute} are the culprits, such as
#home-section-6-container .copy-container-inner {
left: 50%;
padding-top: 84.75%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
which is part of a problem at 1052px and somewhat wider.
There seem to be several places where position:absolute has been used on your page. You might look into those for their “potential”.
In the “For What It’s Worth” category, I recommend that one NOT minimize his CSS or other code during the troubleshooting phase of development. Makes it difficult to express exactly where a problem is located other than “line 1”.
Thanks everyone, you really helped me narrow it down! it was transform. I didn’t use vendor prefixes like I should have:
-webkit-
-ms-
Now the layout is working for the most part. However, once the resolution gets lower than 375px in width, that 4-icon grid breaks up at the end, which is something I can’t figure out. I’ve tried 49% width and lower and it goes into place at 43%, but by that time, it’s too small and shifted to the left.
I’ll continue looking for a solution
And ronpat, thanks, I totally would have not minified the code, but Shopify does that automatically because it has a SASS processor built in, so any style sheets using sass get minified I believe.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.