- This topic has 5 replies, 2 voices, and was last updated 1 year, 8 months ago by
Leo.
-
AuthorPosts
-
May 23, 2019 at 2:45 pm #909182
Henry
It seems that there are left and right margins added to the GP recommended “Grid Container” setup?
If you see my screenshot you will see what I mean: https://prnt.sc/nsknmu
This is the code that I am referring to. How do I keep the grid container flush and hugging the sides of the parent container?
Thanks!
<div class="grid-container"> <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column"> <div class="alert-coupon"> This is an alert box. </div> </div> <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column"> <div class="alert-sponsor"> This is an alert box. </div> </div> </div>
May 23, 2019 at 2:54 pm #909192Leo
StaffCustomer SupportHi there,
You will need to give that
<div>
a second class likealert-box
so you can target it with CSS:.grid-container.alert-box { padding: 0; }
The site you linked also doesn’t match the screenshot you’ve shown by the way.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 23, 2019 at 3:19 pm #909198Henry
Thanks Leo! Hmm, there is still padding though….
<div class="grid-container alert-boxes"> <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column"> <div class="alert-coupon"> <a href="">This is an alert box.</a> </div> </div> <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column"> <div class="alert-sponsor"> This is an alert box. </div> </div>
And here is the CSS:
.grid-container.alert-boxes { padding: 0; }
(I changed .alert-box to .alert-boxes (plural) just b/c there is another reference to that name in the CSS).
Here is the actual URL: https://testinfosec.wpengine.com/events-in-2019/cyber-security-cloud-expo/
Maybe the parent container div also needs to have its’ padding removed or made to zero?
Thanks Leo.
May 23, 2019 at 6:20 pm #909268Leo
StaffCustomer SupportYou can always use browser inspect to see where the padding is coming from:
https://www.screencast.com/t/Ov2LEqOTGood skill to learn for web developing π
So in this case, this CSS should work:
.alert-boxes .grid-50 { padding: 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 24, 2019 at 4:41 pm #910118Henry
Thanks Leo – worked great
May 24, 2019 at 5:13 pm #910130Leo
StaffCustomer SupportNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.