Decrease text width in posts only

Hi @gdaytaiwan. ??

If you first remove the following piece of custom CSS:

.site {
    max-width: 100%;
}

You could use the following to increase the width of the images in your posts on larger devices:

@media screen and (min-width: 75em) {
    .site-content .gallery-columns-1.gallery a img {
        max-width: 140%;
        width: 140%;
        margin-left: -20%;
        margin-right: -20%;
    }
}

Give that a try and let me know how it goes!

Hi Siobhan

Thanks for your help! some of the photos are now full screen which I love! Could you also help me with a css for all other types of Jetpack galleries? ie. Tiled mosaic, square tiles, tiled columns etc. As you can see the single images are nicely full-screen, but the others aren’t: https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/

Also, I didn’t get rid of this code as you asked me to:

.site {
    max-width: 100%;
}

the reason being because once I do that, there is an obvious grey area on the left and right side. Is there a way I can still decrease the width of text / increase margins for just the text area?

Could you also help me with a css for all other types of Jetpack galleries? ie. Tiled mosaic, square tiles, tiled columns etc. As you can see the single images are nicely full-screen, but the others aren’t: https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/

I’m afraid I’m not able to find a good, consistent way to get those galleries to take up more than 100% of the available screen width, due to the way a width is assigned to the images.

Is there a way I can still decrease the width of text / increase margins for just the text area?

If your main issue is with the grey bars, then I think the best approach is to remove that first bit of CSS then change the background of the body from grey to white with the following:

body {
    background: #fff;
}

thanks Siobhan

The reason why I’m a little reluctant to move the

.site {
    max-width: 100%;
}

is because if I do that, I have to fix the width for header and front page. Unless there are css to help me keep everything else the way it is, I only want to do the text. I tried playing around with some code and this is what I’ve done which has helped me increase the padding to some of the text. However this affects pages and posts, and I only want to change the width on single posts. I also need text subheadings and columns to line up. Not sure if you could help me elaborate it:

p {margin:30px 200px;}

as an example the post I need help with is: https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/

• This reply was modified 7 years, 1 month ago by gdaytaiwan.

Could you try the following to only reset the width on single posts?

.single-post .site {
    width: auto;
}

thanks Siobhan

Unfortunately that doesn’t seem to help. It reverts the layout to the default two column and then the home page is affected by removing the max width for the site which I want it to stay as it is.

Would you know what the CSS is for me to change the width of all headings and columns in single posts only?

@gdaytaiwan: It wouldn’t be necessary for you to remove the max-width of your site if you added the above custom CSS, you could add it at the end of your custom CSS so that the home page isn’t impacted. I can’t think of a good way to increase the width of your images on single posts without overriding that max-width.

• This reply was modified 7 years ago by Siobhan.

Oh Thank you! I misunderstood you about removing the max-width! now everything works fine just like how I wanted.

Thanks very much for your patience and help!

Hi Siobhan sorry before I let this one go completely, I noticed that the photos are only enlarged on larger resolutions, not on mobile.

Is there another code I can use to make the photos on smaller screens also full width?

Let me know if I should just open up a new ticket.

Thank you!

Hi @gdaytaiwan – I’m taking over this thread for Siobhan.

I’ve read over what’s been done so far but I’m not 100% sure about what you would like to see now on smaller screens.

The CSS Siobhan gave you earlier applies to screens larger than 75em:

@media screen and (min-width: 75em) {

Would it be possible to explain in a little more detail what you want? This is what I see now on smaller screens:

It looks good to me as is, but if you’re looking for a different effect, I’d be happy to help you get there! Would you just like more empty space to the right and left of the text on smaller screens? Let me know.

Thanks Kathryn

Yes i just realised for some reason that single blog post has different sized images to the other recent posts I’ve published. It’s supposed to look like this:
https://www.gdaytaiwan.com/2017/09/01/another-blog-sun-moon-lake-not/

Could you help me make that post the same size with how it should be? I went through the CSS and I don’t see why that single post is unique to the others.

And regarding images on smaller resolutions, I would like the images to also be full screen, so no empty space on the left and right of the image.

Many thanks Kathryn!

Yes i just realised for some reason that single blog post has different sized images to the other recent posts I’ve published. It’s supposed to look like this:
https://www.gdaytaiwan.com/2017/09/01/another-blog-sun-moon-lake-not/

Could you help me make that post the same size with how it should be? I went through the CSS and I don’t see why that single post is unique to the others.

Looks like this part of your CSS is the culprit – those 200% values are telling the images within that specific gallery element to be twice as wide as their containing element, on screens at least 75em wide:

@media screen and (min-width: 75em) {
    .site-content .gallery-columns-1.gallery a img {
        max-width: 200%;
        width: 200%;
        margin-left: -100%;
        margin-right: -100%;
    }
}

It’s coming from your custom CSS:

https://www.gdaytaiwan.com/?custom-css=64503ef411