Essential Grid: CSS to Remove Margin in Mobile View

Hi! By researching other posts I nearly have my mobile display perfect for my essential grid blog posts…

The only thing I can’t figure out is how to remove the 50px margin I have on desktop view for the title of the post.

Here’s my css:

@media (max-width: 480px) {
body .eg-jaime-mintun-blog-element-5 {
font-size: 16px !important;
line-height: 20px !important;
padding-left: 0 !important;
text-align: left;
}

.esg-cc .esg-center {
padding: 200px 0;
}
}

@media (max-width: 480px) {

body .eg-jaime-mintun-blog-element-1 {
font-size:20px!important;
line-height:22px!important;
margin-bottom:0px!important;
margin-left:0px!important;
}

}

Everything else is working except the margin-bottom and margin-left items. Please let me know how to edit my css so those work! Thanks!!

hahhaha… just after posting this I finally figured it out.

In case anyone else has this issue, I had to account for the a href/linkable version of the title… the corrected code looks like this:

@media (max-width: 480px) {
body .eg-jaime-mintun-blog-element-5 {
font-size: 16px !important;
line-height: 20px !important;
padding-left: 0 !important;
text-align: left;
}

.esg-cc .esg-center {
padding: 200px 0;
}
}

@media (max-width: 480px) {

body .eg-jaime-mintun-blog-element-1, .eg-jaime-mintun-blog-element-1-a {
font-size:20px!important;
line-height:22px!important;
margin:0px!important;
}

}

Hey There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.