Hello Weavers,
I am using RW8 with Foundation
When I define sizing inside the 1 column stack for Desktop ONLY, the changes happen also for Tablet. So, I imagine there are some settings within RW that I should adjust.
I looked inside Site Styles, but I din’t find the option to do that.
Do you have any idea on how I can sort this out?
Not sure what 1-column stack you are using? Foundation 6 doesn’t have a “Desktop ONLY” but uses small, medium and large.
Ops… my bad! I’ll correct the caption above.
Sorry Doug! I am not using Foundation 6, I got confused with Stacks (which I got the last version). I still need to update to Foundation 6 actually.
I am using the previous version. This is how it looks:
I just duplicated the settings you have in F1.
I’m not seeing the issue. The desktop breakpoint is >=1001 px. The Mobile breakpoint is 640px.
The 1 column will apply the mobile Breakpoint on tablet (640 px thru 1001px) if it is applied. If no Tablet is defined then the mobile settings will work until you get to desktop >1000px.
Wow, thanks a lot for double checking. I really appreciated it.
How did you find out at how much the breakpoints are set?
…That means that my laptop (13.3-inch) has the same parameters about sizing as a Mac of 21.5-inch or 27-inch does. Ouch, maybe I ought to adjust my Site Style back into defined max width, as now it is set as “unlimited width”. Probably that’s where the issue is…
I imagine setting the Site Style with a defined width is the easiest route, rather than adjusting the breakpoint and then defining the size individually again.
What do you reckon?
You can look at the Media queries in the CSS file, or you can just use the simulator or preview and see when the break occurs.
I don’t believe there is a way to change the breakpoints in Foundation. They are preset. You can set a max-width.
I think one of the reasons Joe stopped calling the mobile tablet and desktop is it’s confusing. Some new phones will be bigger than small tablets, and large tablets will be bigger than small notebooks. Zerb (Foundation) and Bootstrap have always called them genric names like Small Medium and Large.
Bootstrap 4 added an extra-large breakpoint to handle the larger screens (like the 27inch), but no one in RW is using it.
Most websites set a max-width (common is about 1200px). So even on the larger screens, it caps off. Most of us that have larger screens (I have two 27-inch and a 19 inch on one Mac) use the extra space to have stuff open. It would be rare for someone to use a 27+ in full-screen mode.
Understood. Thanks for your explanation and clarification of that.
I defined the max-width of the site at 1400px. It now shows very well on all platforms. Thanks a lot for your help. Much appreciated
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
