Need help with css for mobile (remove post and page padding)

[jaimemintun]

I’ve tried to alter the padding, margins, font size, etc. for mobile display to make my site look better on the smaller screens.

Yet I must be messing up the css code because it’s not shifting the display of anything on mobile.

Can you please review and give me updated/correct css code? Thank you so much!

    @media screen and (max-width:440px){
  .post-template-default .single-post .x-container.width {
    width: 100%!important;}
  .post-template-default .single-post .x-container-offset {
    margin:5%!important;
    }
}

Specifically I want fonts to display around 14 or 18px on mobile and to change padding or margin on post and page text from auto or desktop percentages to roughly 5%. I can tweak the numbers once the correct code is there.

For example I tried to change the margins on my blog posts to a percentage but the right and left margins are set to auto no matter what I do. Perhaps due to the post type template? Please advise if there’s an easier fix there.

Thanks again! I’ll send login credentials in a private post.

[nabeel]

Hi there,

Thanks for writing around! Please change your code to this:

@media screen and (max-width: 767px) {
    .single-post .x-container.width {
      width: 100% !important;
    }
    .single-post .x-container-offset {
      margin:5% !important;
    }
}

Let us know how this goes!

[jaimemintun]

Great, thank you, that worked! Only remaining issue is now my post title left justifies even though the text is centered. Can you give me the code to make it centered in the middle of the screen? Thank you!

[thai]

Hi There,

Please find this custom CSS:

.single-post .x-container .caption h1 {
    text-align:center;
    display:flex;justify-content:center;align-items:center;
  }

And change to this:

.single-post .x-container .caption h1 {
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-right: 0;
}

Hope it helps

[jaimemintun]

Woot woot! That did it. Thank you so much!!

[rad]

You’re most welcome!