Using Media Queries in Gantry 5
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Please note that our official documentation has now been updated to include the information herein and can be found at
http://docs.gantry.org/gantry5/tutorials/media-queries
,
Those of you that have written custom CSS in other templates will also have likely used media queries. Media Queries are a way of applying some CSS only to a specific viewport size (e.g. a phone, a tablet, a desktop, etc). Gantry 5 introduces the ability to alter when the breakpoint between viewport sizes occur (on the styles tab of you Gantry 5 theme/outline under "configuration styles > breakpoints"). So, as these breakpoints are now user configurable the old Gantry 4 media queries that you might be used to are not appropriate for use in Gantry 5. Fortunately the variables that contain the breakpoints are readily avaiable to you in your custom SCSS file http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet through the use of an import statement.
So, if you wish to use media queries in Gantry 5, this is the code that you will need.
// Gantry 5 custom CSS file // import dependencies @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: $mobile-menu-breakpoint) { }
So any CSS that you wish to apply to a specific breakpoint can be added inside the appropriate media query above.
Regards, Mark.
P.S. For those of you thinking "what are those weird rem values"... 0.062rem = 1px. As ranges can't overlap they need to be 1px different - hence why the typical rem values have three decimal places
- Last Edit: 8 years 8 months ago by MrT.
-
The following users have thanked you: Seniha Meliha, Hugo Avila, Henning, DanG, Max Power, jooru, Damir, Franck
- 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.
-
-
-
- Wicko
- Elite Rocketeer
- Posts: 884
- Thanks: 8
- Self employed Graphic designer with over 20 years of experience in branding, retail packaging and web design.
-
Very useful advice.
Thank you - This image is hidden for guests.
Please log in or register to see it.
Wicko Design is a multi-disciplined creative agency based in the South East of England. Specialising in web design & development, retail packaging and brand identity.
https://www.wickodesign.com
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Note I just brought the code above up-to-date (it was already in the official docs).
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.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
-
Very powerful and easy to use. My question is how to specify specific CSS styles for viewports between two specific breakpoints. I want for example a search box to be 100% width when the viewports gets down to 48rem. Using this method I need to put in this behaviour twice: once in @include breakpoint(large-mobile-range) and once in @include breakpoint(small-mobile-range).
How can I do this with one CSS statement so the search box is 100% width when the viewport is less than 48rem?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
V-Web - Please don't post in dormant topics that are over six months old (even if it is a tutorial) or we might miss your post altogether. It's always best to create a new topic of your own.
Here are all the breakpoints we have below, the answer is no you don't have top do that use the "mobile-only" breakpoint
// 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) { } @import "nucleus/mixins/breakpoints";
Regards, Mark. - Last Edit: 8 years 2 months ago by MrT.
- 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.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
-
Hi Mark,
Sorry 'bout that.
Seems clear to me. What I've done in the meantime is transfer the breakpoints.scss from the nucleus engine to my custom theme and made some adjustments so I have more flexibility in breakpoint usage. I guess this is also the right way to go?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Personally I wouldn't be moving away from the standard Gantry 5 core breakpoints because if we change them for any reason you are going to have to change your template too. Given that we provide so many I'm puzzled why you need anymore anyhow and if you have come up with something you think we've missed then it would be better to raise a github issue and have us add it to Gantry 5 core.
It's also important to understand that those mixins are actually using variables provided by Gantry 5 admin settings (users can modify the breakpoint values) so you don't want to be hardcoding any values in your version of the breakpoints either (just mentioning in case you did).
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.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
- Guess it's also a matter of curiousity to see in which way you're able to further customize the framework in case, for whatever reason, we might need it. Looking at the basic flexibility of the framework without any customization needs is already stunning, honestly!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Ok then if you are just experimenting, but there are plenty of things you shouldn't do just because you can .
If you are an advanced developer then why not consider contributing to the Gantry 5 project itself on github? Gantry 5 is an opensource project and there are lots of developers already contributing to the project and there's the opportunity to get you name in lights too (we always acknowledge contributions).
You may also find it useful to talk to other developers too https://gitter.im/gantry/gantry5 .
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.
-
-
-
- V-Web
- Rocketeer
- Posts: 91
- Thanks: 0
-
You're absolutely right about that and I'll definately consider doing this. We switched to Gantry 5 early last month and we're very satisfied with the possibilities it gives us developers. We're currenlty pushing it a bit to its limits just to see how far we should go.
Thanks again!
-
Time to create page: 0.072 seconds