Premium Theme Support › DesignOrbital › Perennial

Change blog post text width using CSS

  • Author
    Posts
  • #155535
    emrold
    Member

    Hi,

    I’m trying to make the text of my blog posts a little wider on larger screens (>1200px) by tweaking the CSS. When I tweak the default CSS from 750px to 950px in the browser’s dev tools, it works great:


    @media     (min-width: 1200px)
    .post-wrapper-single .post-wrapper-single-inside {
    width: 950px;
    }

    But when I paste the same code in the CSS editor on WP, it doesn’t work at all, it’s as if I changed nothing. The only way I can make it work is by removing the @media (min-width: 1200px) clause, but then that breaks the mobile experience.

    Is there another class I need to specify?

    Thanks

    The blog I need help with is: (visible only to logged in users)

    #155536
    designorbital
    Theme Author

    Hi,

    WordPress Block editor has some its own or core rules which decide the width of editor. You can use this snippet in the Additional CSS section in the Customizer, so they will reflect in the front end of your blog.

    I hope it will help you.
    Thanks

    #155537
    emrold
    Member
    Original poster

    That’s exactly what I did… I pasted the CSS into the Additional CSS editor and it doesn’t work at all.

    Thanks

    #155549
    designorbital
    Theme Author

    Hi,

    Please share your complete css snippet you have pasted in the Additional CSS.

    Thanks

    #155550
    emrold
    Member
    Original poster

    Hi!

    Thanks for getting back to me. Here’s the code that I’m using in Additional CSS:

    media (min-width: 1200px) 
.post-wrapper-single .post-wrapper-single-inside { 
  width: 1000px; 
}

    I also created a page with screenshots that describes what I’m trying to do and what it looks like. Hopefully this will be helpful!

    https://ericdelorme.ca/resize-css/

    Thanks again

    #155555
    designorbital
    Theme Author

    Please try the following one,

    
@media (min-width: 1200px) {
    .post-wrapper-single .post-wrapper-single-inside {
        width: 1000px;
    }
}

    Thanks

    #155558
    emrold
    Member
    Original poster

    That’s what I was trying… sorry about the typo in my code snippet above (missing “@”).

    When I use the @media clause, it’s like the whole CSS snippet is ignored altogether. Very strange.

    Thanks

    #155654
    designorbital
    Theme Author

    Hi,

    I am able to use css snippet with @media in Customizer > Additional CSS.
    Can you send me the screenshot of Customizer > Additional CSS so i may have an idea.

    Thanks

    #155656
    emrold
    Member
    Original poster

    Hi,

    I documented everything here with screenshots. https://ericdelorme.ca/resize-css/

    Thanks for your help

    #155658
    designorbital
    Theme Author

    Hi,

    You are not using css snippet properly. You are missing curly braces of @media block.
    Please copy and paste the following code. 

    
@media (min-width: 1200px) {
    .post-wrapper-single .post-wrapper-single-inside {
        width: 1000px;
    }
}

    Hope it will help you.
    Thanks

    #155662
    emrold
    Member
    Original poster

    It worked great, thanks!! It’s interesting that the Additional CSS editor is more strict about syntax than the browsers are…

    I appreciate your patience and assistance.

  • The topic ‘Change blog post text width using CSS’ is closed to new replies.