How to reduce the container width on post pages?

Hi @rishabhsingh12 ,

Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and add the code below:

.single-post .container {
    width: 80%;
}

Let me know if that does it.

— Youcef

Thanks @youcef-ayoub , it works.

Hi, @youcef-ayoub , Actually there is one problem in your method. This code works on both PC and Mobile devices. And on Mobile devices the width of the post becomes so narrow that it’s really hard to read.

Edit: I solved this issue by adding Media Queries.
we have to add @media only screen and (min-width: 600px) { /your code/ }

@rishabhsingh12
add this code

@media only screen and (min-width: 600px) {
.single-post .container {
    width: 80%;
}
}

Let me know if that does it.

— Youcef

Hi, @youcef-ayoub Yes it worked fine for mobiles and desktops. But I also want full width container on Tablet devices.

I used 900 in place of 600px :
@media only screen and (min-width: 900px) {
.single-post .container {
width: 60%;
}
}

Now, a tablets width must be less than 900px, but still it’s applying 80% container-width in tablets also.

I only want to reduce container size in desktop, Mobiles and tablets settings should remain as default.

What I want is:
I want full screen layout on tablets and mobiles, please give me a code for that.

• This reply was modified 4 years, 8 months ago by rishabhsingh12.

@rishabhsingh12
add this code

@media only screen and (min-width: 1000px) {
.single-post .container {
    width: 100%;
}
}