Content Width on Mobile

[mike dias]

Hello – How do I change the content width on mobile? On the desktop it looks very clean. On mobile everything looks like its only using half the available space. I have the background color – dark grey – then the blog post color grey – then the text. The padding on each – but especially on the text and images is too much. Please see http://mike-dias.com/ on mobile. Thank you

[satori]

Hey Mike,
please try adding this snippet to the “Style: Add Custom CSS” tab of the Theme Options panel:

#blog-header h1 { word-break: break-word; }
@media only screen and (max-width: 724px) {
#blog-header { padding: 20px 20px 10px 20px !important; }
.header-desc { padding: 0 20px !important; }
}

Cheers,
Andrii / Satori Studio

[mike dias]

Thank you. That solved it for blog posts and category descriptions but I still have the same padding problems for Pages.

On some of my pages, I have embedded blog posts. The embedded blog posts on the pages are highly indented. Is there another snippet that I can add?

Thank you

[satori]

Apart from the above code, please try also adding the following line:

@media only screen and (max-width: 724px) {
.archive .post { margin: 0 !important; }
}

Cheers,
Andrii / Satori Studio

[Author]

Posts