Making blog posts full-width on mobile

[ccbeglin]

Hi there. I’m having an issue with the appearance of my blog posts on mobile.

It looks great and scales nicely on a laptop screen browser, but it is too narrow and single words are forced to track onto new lines to fit in my mobile view:

Is there a setting in the theme or additional css I can add to fix this? Thanks!

[Prasant]

Hello @ccbeglin,

Thanks for asking.

Reason why blog posts are squeezed on mobile devices is because you have added a custom CSS that’s forcing the posts:

.blog .entry-wrap, .single .entry-wrap {
    padding: 100px !important;
}
.has-post-thumbnail .entry-wrap {
    padding: 50px;
}

In case you want to use above CSS, you have the option to limit the changes to desktop or laptop screens. To do that, please replace the code you have added with following CSS under X > Theme Options > CSS:

@media only screen and (min-width: 900px) {
    .blog .entry-wrap, .single .entry-wrap {
    padding: 100px !important;
}
.has-post-thumbnail .entry-wrap {
    padding: 50px !important;
}
}

To make the changes in above code I have used CSS media queries. To learn more about CSS media queries, please take a look at following resource:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please note that providing support for custom codes (like CSS changes) falls outside the scope of support we can offer. In case of any issues with the layout because of custom codes we won’t be able to provide support.

Thanks.

[ccbeglin]

Thank you, I just removed the CSS altogether. I appreciate your help!

[jade]

You’re most welcome!