Archived topic
Dynamic sizing of post content possible?
9 replies · Started by Jason on March 7, 2023
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!
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.
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.
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;
}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!
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;
}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;
}
}How would you like the images to look like on mobile?
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!
I see. I checked and it seems to work as well from my end. You're welcome, Jason!
