[Support request] Dynamic sizing of post content possible?

[Jason]

Hello!

So the main container for my site is 1440px, but since I am running a single column, I’m trying to get the post content into a smaller container so it’s easier to read.

To do this, I created a new Content Template with a container set at 1040px width and placed a Dynamic Content -> Post Content inside that container. I applied the template to all posts and it looks great. What I am wondering however, if there is any easy way that I could do something like this that applies to all existing posts but make the images within the content (post) span the main container?

Here is an example post – I would like the images below each month’s heading to be wider than the 1040px text container (like how the featured image is):

https://fullcleared.com/features/upcoming-video-game-releases/

I know I can do this if I manually built every post, but I would like to avoid that if possible. Is there custom CSS that could apply to all imgs within post content to span the main container width?

Thanks in advance!

[Fernando]

Hi Jason,

You can try using a Layout Element instead. Reference: https://docs.generatepress.com/article/layout-element-overview/

In the Content section, you can set a specific Content width.

[Jason]

Hey Fernando,

I actually tried the Layout Element first but I still can’t figure out how that would allow me to constrain the text to a certain width container while keeping the images at full width. I was hoping to be able to do this without having to manually do it in each post if that makes sense.

Is this possible to do in Layout Element? Maybe I missed something.

Basically I want all text to be within a 1040px container, but all images to be in a 1440px container.

[Fernando]

I see. Do you have all your images aligned to full-width? Example: https://share.getcloudapp.com/jkuAJ6Lj

If not, we can try doing it through custom CSS. Try adding this:

.single-post figure.gb-block-image {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

[Jason]

Hey Fernando!

So this is close to what I want, except I want the image to be exactly 1440px wide, matching the parent container instead of going 100% width of the display. Is that possible?

Thanks!

[Fernando]

Try this code instead:

.single-post figure.gb-block-image {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
    text-align: center;
}

.single-post figure.gb-block-image img {
    max-width: 1440px;
}

[Jason]

That works like a charm! If I wanted to keep the images responsive for mobile, is this the correct way to do it?

@media (min-width: 1400px) {
	.single-post figure.gb-block-image img {
          max-width: 1400px; 
	}
}

[Fernando]

How would you like the images to look like on mobile?

[Jason]

I would like them to be responsive, so sized accordingly while keeping full width. I think the code I implemented works, but I wasn’t sure if it’s the correct way to do it.

Thanks again for all your help!

[Fernando]

I see. I checked and it seems to work as well from my end. You’re welcome, Jason!

[Author]

Posts