Mobile first design question

User 2601283 Photo


Registered User
219 posts

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.
User 244626 Photo


Registered User
811 posts

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
Bootstrap 5 CSS Grid.
User 2601283 Photo


Registered User
219 posts

Disappointing if it can't be fixed. Guess it's back to discontinued software to make the site work properly.
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

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.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

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

Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,398 posts
Online Now

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/
User 2601283 Photo


Registered User
219 posts

Here you go.
Attachments:
User 244626 Photo


Registered User
811 posts

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.
Attachments:
Bootstrap 5 CSS Grid.
User 2601283 Photo


Registered User
219 posts

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.