SOLVED Media Queries and breakpoints
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
Hai,
URL: e.g. nieuw.megiq.com/products/vna-0440
The top part, the blue bar and the menu, does not work well on an iPad (landscape) and the smaller screens (for example 900 pixels). See print screen.
The breadcrumb path is also not satisfactory.
I have already tried something with the breakpoints, but somehow it still does not work.
Would like your help.
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. Increase the space allocated to the first particle in the blue bar from 27% to something larger so that it does not wrap.
2. You will never fit that huge menu on one line in all viewports - therefore, I recommend that you change the breakpoint at which the desktop menu change to the mobile toggle menu. You do this on the base outline > styles > breakpoints > mobile menu and change this to (say) 60rem;
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
Thanks.
2. Okay, clear. The disadvantage is that I now have to set the breakpoint to 75 brake (1200 pixels). Is it possible to first automatically reduce the font size of the menu items by, for example, 10% and only then switch to the mobile menu?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You can but it won't look good and probably won't help either but this is the code to change the font size.
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container { font-size: 0.5rem; padding: 5px; margin: 10px 0; }
You can put that in the media queries that you wish it to apply.
// Gantry 5 custom CSS file // import breakpoints @import "dependencies"; // Typical values are the default breakpoints set in Gantry 5 // but these values are user definable in style settings // so that is why the code below uses mixins to get the actual // values from Gantry 5 template. // commonly used media queries // typically min 75rem @include breakpoint(large-desktop-range) { } // typically range 60rem to 74.938rem @include breakpoint(desktop-range) { } // typically 48rem to 59.938rem @include breakpoint(tablet-range) { } // typically 30rem to 47.938rem @include breakpoint(large-mobile-range) { } // typically max 30rem @include breakpoint(small-mobile-range) { } // Less commonly used media queries // typically min 60rem @include breakpoint(desktop-only) { } // typically min 48rem @include breakpoint(no-mobile) { } // typically max 47.938 rem @include breakpoint(mobile-only) { } // typically max 59.938rem @include breakpoint(no-desktop) { } // Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { }
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark.
p.s. you have a JS error in the browser console that is something to do with linkedin that you need to fix. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
Time to create page: 0.101 seconds