Myriad 2.5 Gutter size on mobile
-
-
- Gordon Hiebert
- Newbie
- Posts: 2
- Thanks: 0
-
I have G5 Myriad template 2.5.0
Joomla 5.2.2
Gantry 5 of course
Photography website, one image per page and some text detail below it. The image is a full-text image.
On mobile (min-width:320px) and/or (min-width:480px)the gutters are huge and my article is really narrow. Tried for hours, reading whatever instructions I can find, to make the gutters small so that my text and photo fill more of the phone screen.
I understand that gutters are really just a padding setting. But my attempts at overrides are not working so far. Perhaps let me know what to enter into the custom.scss file for Myriad?
I love the look on desktop, very pleased. But out of practice with css.
Many thanks. - Last Edit: 2 months 1 week ago by Gordon Hiebert.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22253
- Thanks: 3223
- messin' with stuff
- post a link to your site and specifically to the page you show in your screen site. You can post privately in the Secure tab of a Full reply if you'd like
- 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
-
-
-
- Gordon Hiebert
- Newbie
- Posts: 2
- Thanks: 0
-
Thanks, I thought you might like a link. It is going to be a public artwork site anyway, not quite finished yet but readable.
gordonhiebert.ca/index.php?option=com_co...le&id=596&Itemid=161
is one,
or even just the home page, probably makes no difference.
gordonhiebert.ca
I might be changing product pages slightly at some point during the day to include onclick events but that will not alter the mobile view in any way. I might even make the onclick events invisible to mobile once I learn how. It is learning as I go and it is fun.
It would seem to me that gutters(padding) should be easy to make smaller, but I have not figured out where to do it.
I am using the custom.scss file. I can post that too if you wish.
Cheers
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22253
- Thanks: 3223
- messin' with stuff
-
Use the Variations on your Sections and Blocks/Particles to change the Padding/Margins... you can use "No Padding/Margin All" or just the No Padding/Margin Left/Right options...
docs.gantry.org/gantry5/configure/layout-manager#settings-2
You've also added padding to every block in your custom.scss file, line 86... I would definitely recommend never targetting .g-block like that directly... you're effectively breaking Gantry's grid system with some of the other CSS properties you've set there... instead, define a custom class for whatever you want to apply that stying to and use the Classes field on the given Particle/Block to call it. - 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
-
Time to create page: 0.046 seconds