Blog post text too skinny on mobile

Hello,

Please see the attached screenshot. I’d like to make the text a bit wider on mobile in the post template. How can I do that?

Thanks!

Hi Connor,

Thanks for posting in!

You have used Cornerstone in creating your post. It is skinny in smaller screens because you have set a padding of: padding: 14px 45px 14px 45px; . 45 pixels has been as your left and right padding in each of the section. And then in your row setting, you have enabled the column container. To resolve your issue, please do this:

1.) Please make sure that there is no left and right padding in each section.
2.) In each row setting, please disable the inner container.

And if ever you want to have a solution that applies to all your posts without editing them one by one, then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .entry-content.content .x-section{
    padding-left: 0;
    padding-right: 0;
}

.single-post .entry-content.content .x-section .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

The quick solution is not highly recommended. You should be using the longer method which is the proper way of creating your posts in Cornerstone.

Hope this helps. Please let us know how it goes.

Also - kind of related: is there a way I can set a max width on a text block (I know how to do this in the builder), but use css to ensure that block is centered on the page? Right now setting a max width moves the text to the left side.

Thanks!

Great! I’ll give that a try. Thank you!

Also - kind of related: is there a way I can set a max width on a text block (I know how to do this in the builder), but use css to ensure that block is centered on the page? Right now setting a max width moves the text to the left side.

  • Please set the maximum width of the text element and the set the left and right margin to auto.

Perfect! You’re a lifesaver. Thank you!

You’re welcome!
We’re glad we were able to help you out.

One last thing - how do I center align all of my post titles?

Hey Connor,

To center your post titles, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-header .entry-title {
    text-align: center;    
}

We would love to know if this has worked for you. Thank you.

Yep! Everything you said today helped me greatly. Thank you!

You’re welcome!
We’re glad we were able to help you out.

1 Like

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