Remove paddding - mobile blog posts

[ellacoker]

Hello,

Will someone please tell me the code to remove the padding in mobile version to the left and right of my blog posts? I want the images to expand to the width of the screen and text to come out further. P.s please only message me though here.

URL: https://www.livwithin.com.au/blogs/news

Thank you!

Ella.

[ellacoker]

hmm that didnt work

[Paulolo]

To remove the left and right padding (also known as horizontal margin or gutter) on the mobile version of your blog posts, you’ll need to add some custom CSS to your theme.

---

Here’s the CSS you need:

@media only screen and (max-width: 768px) {

.blog-post,

.article,

.rte,

.page-width,

.main-content {

padding-left: 0 !important;

padding-right: 0 !important;

margin-left: 0 !important;

margin-right: 0 !important;

width: 100% !important;

}

.blog-post img,

.article img {

width: 100% !important;

height: auto;

}

}

[Dan-From-Ryviu]

Please add this code at the bottom of your base.css file

@media (max-width: 749px) {
    html .main-blog.page-width {
        padding: 0 !important;
    }
    html .main-blog.page-width .card__content {
        padding: 0 3rem !important;
    }
}

[ellacoker]

Hi paulo, what would I change if i want to keep the images full width like this but make the text come in just a little bit - say 95% of the screen?

[ellacoker]

thanks so much dan, how do i get the same for the blog post itself?? so the text can come 95% of the screen?

[Dan-From-Ryviu]

Please update the code

@media (max-width: 749px) {
    html .main-blog.page-width {
        padding: 0 !important;
    }
    .article-template .page-width,
    html .main-blog.page-width .card__content {
        padding: 0 2rem !important;
    }
}

[ellacoker]

thank you dan, would you also be able to help with with the massive white space between the title and the image? thanks

[Dan-From-Ryviu]

Code update

@media (max-width: 749px) {
    html .main-blog.page-width {
        padding: 0 !important;
    }
    html .article-template { padding-top: 20px !important; }
    .article-template header { margin-top: 0px !important; }
    .article-template .page-width,
    html .main-blog.page-width .card__content {
        padding: 0 2rem !important;
    }
}

[ellacoker]

thank you this is perfect

[ellacoker]

would you be able to tell me as well how to remove the left and right padding of the image with text, images… only in mobile?

on the “our philosophy” page

https://www.livwithin.com.au/pages/our-story

[Dan-From-Ryviu]

Please add this code to Custom CSS of section you want to remove left right padding

@media (max-width: 749px) {
.image-with-text__media {
    max-width: calc(100% + 40px);
    width: calc(100% + 40px);
    margin-left: -20px;
}
}

[cbm]

How can I do this for my theme, desktop version? This is sample my blog page: https://electronicwhiteboardswarehouse.com/blogs/interactive-screens/how-to-set-up-an-efficient-work-from-home-space-with-a-portable-monitor-for-productivity-comfort-and-flexibility

I’m fine with removing the featured product section on the left side if needed.