SOLVED Adding Custom @media breakpoint layouts and overides
-
-
- Brock Porter
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
- Creative Problem Solver
-
Hello,
I believe this is a gantry issue if not I apologize. I am currently working on a custom.scss overide for the remnant template with a joomla 3.6 install. You can view it here brockporter.com/BrxResume/BrxRez/
I am tryting to create a thin column effect on the home page. I have done it withe the following css code ---
.section-paddings, #g-top, #g-slideshow, #g-navigation, #g-header, #g-above, #g-utility, #g-feature, #g-expanded, #g-extension, #g-bottom, #g-footer, #g-copyright {padding-left: 50%; padding-right: 10%;}
It is producing expected results. Now I am trying to alter the layouts, font sizes, for specific screen sizes. I believe it is @media queries I am looking for but could you direct me to tutorials on this I keep getting parsing errors when I try and change the settings
"Twig_Error_Runtime
An exception has been thrown during the rendering of a template ("CSS Compilation on file 'custom.scss' failed on error: Undefined mixin breakpoint: line: 14")."
I want to set up my custom.scss sheet to give me control over the individual style on specific breakpoints.
example
large desktop {my custom css here, plus larger fonts}
Desktop {my current custom padding}
tablet {reduce padding to 30%}
phone {set padding to 0}
mobile {padding set to 0, change font size and color}
mobile menu {change font-size & color}
If you could show me a tutorial that works in the rocket theme environment the stack overflow examples are producing the errors?
Thanks for your help in advance.
Brx
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22306
- Thanks: 3229
- messin' with stuff
-
Here ya go:
docs.gantry.org/gantry5/tutorials/media-queries
If it were me I'd target .g-container { instead of all those individual Section IDs... that may or may not work well depending on the Theme though.
... basically you just need to ensure your importing the dependencies at the top of your custom scss file and you can use the variables that map to the Breakpoint Settings as defined in the admin in your SCSS/CSS
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Brock Porter
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
- Creative Problem Solver
- Thank You!!! This worked great. You Rock!
-
Time to create page: 0.070 seconds