Set Image gallery size equal to body text

Themes
1

I’m trying to learn how to have image galleries and feature images be the exact same width as the body text of my posts. The Doks theme I am using already does this for the posts on the ‘docs’ page, but not for other types of posts.

I’d be very thankful if someone could teach me how to do this. I’ve had no luck so far trying to figure it out with the inspector.

page: 👹 Wabisebi わびせび - Private Site Access
pw: needhelp

CleanShot 2023-09-08 at 20.26.13
CleanShot 2023-09-08 at 20.26.131752×1232 232 KB

image 1, how I would like everything to look.

CleanShot 2023-09-08 at 20.28.21
CleanShot 2023-09-08 at 20.28.211968×1890 489 KB

image 2, page I want to customize

1 Like
2

Howdy, Seb! Looks like the problems are with galleries? Try this?

.content>figure>* {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

If it doesn’t work, try adding some !important. That fixes desktop, but you may need to make adjustments for mobile.

What I did: Looked through the page with the Chrome ‘dev tools’ element inspector until I found the div that held the images. Then I looked at the container that held the post text and figured out that it had max-width: 48rem. So I applied that to the container holding the image gallery.

3

Fixed! Thank you, Cathy.
And thank you for showing me how you did it.

1 Like