I am almost finished with my one pager, but I now see that it falls apart when viewed in landscape on a tablet.
My site is about 1200px by design on desktop (I need to keep it that way). On tablet landscape the nav gets crushed, the copy overlaps with the background image in the hero section, the entire site comes loose laterally, the flex boxes at the bottom become unequal in width somehow, etc…
I need to find a fix for this in order to launch, or I’ll have to completely rebuild the site differently which I would hate to do.
I wish I could just force the mobile view (with hamburger menu, etc…) on anything narrower than 1200 or so, even with custom code for now.
Also Weblow suggested that I set my page width to 100% with a max of 1200px. I did that on my test site but I didn’t see a difference. I might still do it. Not all my section have a value for the width though - not sure why or if I’m doing it right.
Below is my read-only link and screengrabs. I would love your suggestions please…
Thanks @Ed_Delage! It seems that many elements have been given defined pixel values which are causing objects to overlap when the browser viewport gets too narrow. You can see this on the published custom domain URL when you grab the edge of your browser and decrease the width as it approaches the Tablet breakpoint.
That’s why the Get Simplified and Cart buttons are knocked down—they run out of space. Same with the hero header and the list underneath. Your design needs to take into account browser widths over 991 pixels and under 1200 pixels.
For the navigation bar, you could play with using VW for font size and some of your margins (https://css-tricks.com/viewport-sized-typography/). You could do the same with the text in the hero section.
Edit: Also, just to be clear, an iPad will use the desktop breakpoint for your website because the screen width goes beyond the 991px mark. But that’s not what’s causing the visual issue; it’s actually anyone with a browser that’s smaller than around 1200px but larger than 991px that tries to view your website.
Thank you so much - I really appreciate your help. I am going to try to do this. Quick question if that’s ok:
Should I get rid of all defined pixel values for width on the page? Some of the sections on my page have defined values as you mentioned but not all of them (not sure why). Should I change those (or all of them?) to a width of 100% with a 1200px maximum as suggested by welbflow? From this to that basically:
There’s nothing wrong with setting maximum widths for the page—it actually can prevent things from spreading out too far on larger displays.
As for the other parts, you only have to change the elements that are overlapping or being knocked down to a new line as the viewport width decreases. Everything else is great! Looking good!!!
You are the man thank you!! I played around with the vw values and I think I can make it happen. One last question I promise, do you know why and how I can fix the width of the third column here (see image below), which no longer matches the other 2 in the same width bracket we just talked about? The flex boxes should be taking care of that right? Thank you!!
No problem! There’s something in the slider to the right that’s causing this to happen. You’ll have to dig a little deeper into the slider object to confirm and modify whatever’s causing that so it doesn’t keep make the third column wider.
only the image and text is outside this width max value
icapture the page with a browser at size 2993x8312 ratio 1/7 ( for widt beetween FullHD 1920 and 4K 4096)
the image seem to not follow the max width value of 1198 . some image ( 3 bottle) are see mto float to the right !!
and appear only 2x . I test adding it after the 3 column and wecan see that :
– the column 3 width value don’t change
–column 1 2 width have their value width reduce
– gutter width don’t change and define by selector spacer ( spacer { width : 60px }
The error must be relative to the content of selector ( the name of selector change but stay focus on css proprerties / values) for @media (max-width: 991px) !
it seem ok after have this : .workflow-child.chart.last { /* border-width: 3px; */ border-color: #2b2b2b;}
don’t know if it is ok because your or i change the code !!
You are right, I actually gave the slider a set value of 250px for its width earlier and that fixed it - the 3 columns are now equal in width when approaching the breakpoint.
However, the other issue is that the 3 “order/subscribe” buttons no longer align horizontally as pictured below, when approaching the breakpoint.
I originally had to eyeball / cheat the vertical padding within this 3rd module on the right in order for the 3 buttons to align on the front end since the 3rd has more / different content (i.e “CLEAN” + slider element)".
Not sure how I can make sure the buttons remain aligned when approaching the breakpoint…
Hi
I don’t know if it a good way to define column using absolute value ( pixel) when gutter is set also to absolute value ( here 60 ox) …in a way i don’t study the layout around this 3 column widget !! ( hope it is center) .
When change something in CSS you have always to take care that nothing change .
I know this and you see it …before me … nothing is easy … ( I have to master work on flex box …)
Zoom font language can also create some problem …
When modify the css propery on your website the colum width and text aligment is OK now
why not use the same css properties content for the selectors of the slider . The slider need only to have selector ( id) for javascript that don’t have to create the mess with css design !!
When you see the capture screen in the post ( in this forum) the problem about alignment was already there … s perhaps there is 2 problem :
the size of column
-the alligment of content inside the last column
It seem logic since you have more text for the last column . the text take 2 line compare the column 1 and 2 that take 1 line
col 1 => 3x8 oz. bottles
col 2 => 3x8 oz bottles / months
col3 => CLEAN & an other line => 8 oz bottle
in a way when i study the line 1 place holder , it exist in the page for column 2 but is empty . Strange that the empty area in column 2 define by the same selector is well position in column 3 but not column 2 !
Hi
about test isu near the breakpoint …
For test webpage you only have to use firefox and chrome ( many extension exist for each purpose) . Perhaps android or iphone for HD resolution but tool in desktop browser can emulate any resolution .
When study your site . Does al lthe javascript technology come from webflow ? I was thinking it was only a css HTML editor not javascript editor ! . … need to know more about e-commerce and webflow …
Hi @Ed_Delage, it looks to me as if the images used in the first two columns are having a different aspect ratio, and with height and width set to auto, will cause resizing of the images and ultimately the issue with the content alignment.
When I set the image height or the image class in col 1 and 2 to 256px height, I get the following result:
It seems that many elements have been given defined pixel values which are causing objects to overlap when the browser viewport gets too narrow. You can see this on the published custom domain URL when you grab the edge of your browser and decrease the width as it approaches the Tablet breakpoint.
