Mobile first design question - Post...
How do you indicate in the program at which break point to switch from mobile to desktop?
I added a couple of menus to a site and worked only to the left of the smallest breakpoint. The menus are correct on an iphone in portrait, but they flip to desktop (medium-horizontal). With menu builder, you see when it switched modes.
I'm sure its something simple/stupid that I messed up.
I added a couple of menus to a site and worked only to the left of the smallest breakpoint. The menus are correct on an iphone in portrait, but they flip to desktop (medium-horizontal). With menu builder, you see when it switched modes.
I'm sure its something simple/stupid that I messed up.
I am not sure that is possible any longer. Anyone else have a answer to this? I have tried but can no longer use the old method.
http://foundation.zurb.com/sites/docs/m … oint-mixin
http://foundation.zurb.com/sites/docs/m … oint-mixin
Bootstrap 5 CSS Grid.
Disappointing if it can't be fixed. Guess it's back to discontinued software to make the site work properly.
It should be possible. I'm not at home and don't have RSD with me, but something like this:
Split the column holding the menu in two.
At lowest breakpoint let both halves be 12 spans wide.
Then reduce the with of the left column (the one with the menu) gradually at each breakpoint, increasing the right column accordingly. You may perhaps end up with two spans for the menu at wide screens.
Find the container holding the menu. Not sure which one as I can't see it on my tablet, but it has to be the one which is flex and column at small screens, and changes to row after passing the next breakpoint. Once it says row, change that to column.
Someone please try this, and maybe you can help further.
Split the column holding the menu in two.
At lowest breakpoint let both halves be 12 spans wide.
Then reduce the with of the left column (the one with the menu) gradually at each breakpoint, increasing the right column accordingly. You may perhaps end up with two spans for the menu at wide screens.
Find the container holding the menu. Not sure which one as I can't see it on my tablet, but it has to be the one which is flex and column at small screens, and changes to row after passing the next breakpoint. Once it says row, change that to column.
Someone please try this, and maybe you can help further.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
You are probably going to have to override the medium breakpoint with some custom css if you want the menu to change to a hamburger(s) at a lower breakpoint.
See this article....
http://foundation.zurb.com/forum/posts/ … for-widths
See this article....
http://foundation.zurb.com/forum/posts/ … for-widths
Bootstrap 5 CSS Grid.
Can we see the project file again please
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Here you go.
If you want the hamburger menu to show past the medium breakpoint also then you could add "data-hide-for" attribute to the container that holds your hamburger font icon link and set the value to large.
Then you would need change the main list container that contains everything. Class "medium-horizontal" to "large-horizontal".
This would catch most landscape and tablets.
Then you would need change the main list container that contains everything. Class "medium-horizontal" to "large-horizontal".
This would catch most landscape and tablets.
Bootstrap 5 CSS Grid.
Thank You! You are a life saver!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.