Hi,
I'm creating a page that uses modules only, like for a magazine layout. The modules use various box styles. I noticed that the default margins between modules are a little too big. I would like to reduce them by, for example, 50% so that they are equal to the side margins. What's the best way to reduce the default margin size between modules? Should I use custom css? Are there default box styling css styles that should be applied in the module advance settings? etc.
(I've attached an example that illustrates what I'm trying to do)
Thank you very much!
I'm creating a page that uses modules only, like for a magazine layout. The modules use various box styles. I noticed that the default margins between modules are a little too big. I would like to reduce them by, for example, 50% so that they are equal to the side margins. What's the best way to reduce the default margin size between modules? Should I use custom css? Are there default box styling css styles that should be applied in the module advance settings? etc.
(I've attached an example that illustrates what I'm trying to do)
Thank you very much!
Attachments:
Accepted Answer
Hey there,
The margin and padding comes from the
Every single element in the Gantry 5 framework is surrounded by an element that has the
This is the default code for the
You should never modify the
And then, just add the class to the particular element/module position in the Layout Manager.
There are also some very useful utility classes that you can use (make sure you have Gantry 5.3.8+ as those classes were added recently) -
Have a look at this video. It explains everything that I wrote above
The margin and padding comes from the
g-content class.Every single element in the Gantry 5 framework is surrounded by an element that has the
g-content class. That's how the space between the elements is achieved.This is the default code for the
g-content class (it comes from the Gantry 5 core):.g-content {
margin: 0.625rem;
padding: 0.938rem;
}You should never modify the
g-content class globally because it will affect the spacing of all elements on your website. You should modify it on as little scope as possible, meaning that you should be as specific as possible. You can do that by using a custom class and then write your code in the custom.scss like that:.custom-margin-left {
.g-content {
margin-left: 5px;
}
}
.custom-margin-right {
.g-content {
margin-right: 5px;
}
}And then, just add the class to the particular element/module position in the Layout Manager.
There are also some very useful utility classes that you can use (make sure you have Gantry 5.3.8+ as those classes were added recently) -
nomarginleft, nomarginright, nomargintop, nomarginbottom, nopaddingleft, nopaddingright, nopaddingtop and nopaddingbottom.Have a look at this video. It explains everything that I wrote above
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.