[Resolved] Individual blog post padding on mobile

[Jessica]

Back again with another blog post question, this is the trickiest area for me to figure out padding/spacing! 🙂 I’m now confused how to edit the padding on a mobile device of my individual blog posts: https://gojkemail.com/spicy-walks/ On mobile there’s no padding at all, but on desktop it looks great, except I’d like to add some padding at the bottom of each blog post so it doesn’t hit the footer. I’m sure I’m missing something simple, but let me know if you have a solution, thanks!!

[Ying]

Hi Jessica,

You are using a layout element to set the width of content to 800pxon single post which made it no padding.

We can add some padding to the container on mobile:

@media (max-width: 768px) {
    .single-post #content {
        padding: 40px 20px ;
    }
}

Feel free to change the numbers 🙂

[Jessica]

That worked perfectly, thank you! How about adding bottom padding to all individual blog posts on desktop? Is there similar CSS? Thanks in advance!

[Elvin]

Hi Jessica,

For desktop, we can do @media (min-width:769px)

Example:

@media (min-width: 769px) {
    .single-post #content {
        padding-: 0px 0px 40px 0px ;
    }
}

first value is top, second value is right, the third value with 40px is bottom, fourth value is left. 🙂

[Jessica]

That worked, thanks so much for your help!

[Elvin]

Nice one. No problem. 😀

[Author]

Posts