Media query in Gantry 5 for desktop and down
-
-
- Andreas Johannessen
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
I am reading about meda-queries in this tutorial
docs.gantry.org/gantry5/tutorials/media-queries
. I want to have a media query that is applied for desktop and smaller screens. Do I have to create this somehow? Or is it something that is ready to be used?
If I use the «desktop-range» my SCSS is ignored for tablets etc.
Something like this:@include breakpoint(desktop down) { }
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
// 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";
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. - 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.
-
-
-
- Andreas Johannessen
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
- I have seen that. But that means I must create a new variable named «desktop-down» for instance and write the text my self?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
No, not at all. Copy what I gave you into your custom CSS file. Then just put whatever you want in the appropriate media query.
Are you truly saying that you want a media query the does everything but a large-display desktop? That would be a very unusual request... better to put the thing that differentiate a "large-display" from the normal in the "large-display" media query.
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.
-
-
-
- Andreas Johannessen
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
I have a row with three columns using the g-grid, g-block and g-size CSS classes. When the user resizes or are using a display that is not able to show those three columns correct I want it to show two instead before it is in mobile view and show one-by-one as standard.
Using the desktop-range it works, but as soon as it it < 60rem it jumps back to 3 columns before until you resize it enough so you only see one at a time.
// typically range 60rem to 74.938rem @include breakpoint(desktop-range) { .navigation-card.size-33 { width: 50%; flex: 0 50%; } } - Last Edit: 6 years 9 months ago by Andreas Johannessen.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
So you need to repeat the same CSS in "tablet-range" and "mobile-only" range too.
I really recommend that you don't start mapipulating Gantry 5 classes like this... ok you did it by adding another class on the same element and qualifying your CSS with that at least... but it's still not a good approach.
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.
-
-
-
- Andreas Johannessen
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
Ok, I understand. Is it a clean way to repeat it? Or just duplicate the code.
What would my options be then?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Create your own set of classes to do much the same - at least that way you have full control over what they do. Gantry 5 size-xxx elements will all collapse to 100% width by default. If you want something different to that then you should define your own classes to do what you want instead of using the Gantry 5 ones. E.g. make a "mysize-xx" "my-grid" "my-block" etc etc.
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.
-
-
-
- Andreas Johannessen
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
- Alright, I will create my own classes. But the media queries, if I need to repeat them for "tablet-range" and "mobile-only" range too how should I do that? Just duplicate the content?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
No, you don't neeed to duplicate the media queries? You just put the CSS you want to work at a partiocular viewport size in the appropriate media query. If that means that you have to put the same CSS inside more that one media query then that's what you should do.
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.
-
Time to create page: 0.043 seconds