SOLVED Gantry 5 Responsive
-
-
- Kouskousou
- Sr. Rocketeer
- Posts: 131
- Thanks: 0
-
Hello,
Gantry 5 is responsive. Why have 2 lines when the screen size is 1340x400 (copy screen).
Thank you for your help
Kind Regards
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Because Gantry 5 containers are responsive but you have to ensure that the content you put into them is also responsive. In fact in that case the text is doing exactly what it should.... as the container get's smaller the text has to wrap onto two lines in order for the width of the container to be obeyed.
If you want to resize the text as the viewport reduces then you have to write CSS to do that and use media queries.
// 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";
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. - 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.
-
-
-
- Kouskousou
- Sr. Rocketeer
- Posts: 131
- Thanks: 0
-
Time to create page: 0.061 seconds