Archived topic
Contain feature image, post title and meta width on a full-width single post
5 replies · Started by George on September 24, 2020
Hello. I've bumped into an unexpected issue. I have full-width sections on my single posts and using GenerateBlocks. My layout container is 1300px. Since some sections are full-width, the whole container goes full-width as well. I am using GB containers set to 1380px to simulate left and right paddings of 40px. What I have noticed is that the header feature image and post header meta also go full-screen. I managed to solve the issue with some CSS.
.single-post .inside-article .entry-header, .single-post .inside-article .featured-image {
max-width: 1380px;
margin: 0 auto;
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 768px) {
.single-post .inside-article .featured-image, .single-post .inside-article .entry-header {
padding-left: 30px;
padding-right: 30px;
}
}It works fine but feels like a hack to me. Am I missing something simple?
Hi George,
That looks like a good solution to me.
Can you link me to the page in question so I can see if I can spot anything?
Let me know :)
It's a big hassle to do it right now, still developing. I will once I complete the design. I just found it strange that the title, meta and feature image all went full-screen even though it actually makes sense. I would have liked to see some options to contain certain parts of the page, maybe through Layout element even though its content settings won't change anything, other than containing the whole container again.
The ideal situation down the road would be to implement the title, meta, featured image etc using a block element so everything can be customized this way.
As for now, I wonder if a workaround of using a contained header element with template tags would help?
The header element would be excluded from the full-width setting.
The ideal situation down the road would be to implement the title, meta, featured image etc using a block element so everything can be customized this way.
That would be ideal!
As for now, I wonder if a workaround of using a contained header element with template tags would help?
The header element would be excluded from the full-width setting.
Hmmm, not a bad idea. Once the template tags are entered in the header element, they are not present on the single post template anymore. In my case, though, the design calls for the meta to be displayed underneath the featured image just as the single post template displays them so I would just rather enter the CSS and be done with. I could use absolute positioning for the placement of the header meta, I guess. Thanks for the pointers, this should prove useful in the future!
No problem :)
