[Resolved] Different widths for text & comments versus images/galleries in Single Posts

[Alexandra]

Hey guys! 🙂

I’m trying to give my blog a complete make-over and I’ve decided the best solution is GeneratePress 🙂
I’ve been working on it for a while now and I love all the customizations offered by GP Premium, so a huge thanks for that! You guys are amazing! 🙂

I would, however, need some extra help with the Single Post template.
I need my posts to look like this for the desktop version: https://www.dropbox.com/s/j0ygo8jjgffbqkx/Screenshot_35.jpg?dl=0
Meaning any simple text blocks on a 700 px width and any images (image or gallery) on 1100 px width.
How could I go about achieving that for all single posts without having to manually edit all my old posts (because that would just take forever – I have approx. 450 blog posts with loads of images, galleries and text)?

Here is a sample Single Post on my blog: https://alex.bandiwork.dev/2020/08/fagaras-traseu-cabana-capra-podragu-podragel.html

Also, I would like this look for the mobile version: https://www.dropbox.com/s/7v6recgnif81iq3/Screenshot_20200520-114147_Chrome.jpg?dl=0
meaning any image (image or gallery) to go fullwidth.

Please know that, while I’m quite tech-savvy, I have zero coding skills 🙁
I really hope you can help me! This is something very important to me.

Thank you so much!
Alexandra

[Elvin]

Hi there,

For starters, consider setting the max content width for your page contents.

You can set the content container width through Appearance > Customize > Layout > Content and set the Content container width to your preference (1100px?).

Alternatively, you can set the content container width using a Layout Element which can be found on Appearance > Elements when you enable the Elements module on Appearance > Generate Press.

More on Layout elements found here:
https://docs.generatepress.com/article/layout-element-overview/

As for limiting the paragraph width on large screens for your single posts page to 700px, you can try adding this CSS:

/* Single Post max-width 700px for Paragraphs */
@media (min-width:769px){
body.single .entry-content > p{
max-width: 700px;
}
}

As for making images and image galleries just full viewport width, you can try this CSS code:

/* Force alignwide for mobile view */
@media (max-width:768px){
figure.wp-block-gallery, figure.wp-block-image {
    margin-left: -30px;
    width: calc(100% + 60px);
    max-width: calc(100% + 60px) !important;
}
}

Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

[Alexandra]

Elvin, you are amazing! Thank you SO much for this! It really means a lot!

A only had to add

margin-left: auto;
margin-right: auto;

to make it align center, and… perfection! 🙂

I know it’s off-topic, but is there also a way to limit the comment section to 700px width and have its container be aligned center? Here is an example of what I mean by this: https://undsgn.com/uncode/trust-your-intuition/

Thank you!

[Elvin]

margin-left: auto;
margin-right: auto;

Ohhh nice catch! 😀

My bad, I forgot to include that.

I know it’s off-topic, but is there also a way to limit the comment section to 700px width and have its container be aligned center? Here is an example of what I mean by this: https://undsgn.com/uncode/trust-your-intuition/

You can try adding this CSS to the mix:

.comments-area {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

[Alexandra]

Hi, Elvin!
Oh, no worries, it’s absolutely no problem! 🙂

The comments CSS didn’t work when I placed it just like that, but I somehow got it to work by adding the .comments-area to the first piece of code you gave me. Like this :

@media (min-width:769px){
.comments-area, body.single .entry-content > p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
}

This did the trick! 😀 I’m so happy!
Thank you so much for your help! 🙂
Alexandra

[Elvin]

Nice one.

No problem. 🙂

[Alexandra]

Hi, Elvin!
Unfortunately, I’m back, because I’ve run into a bit of a mess 🙁

The solution you gave me works perfectly for the more recent posts, that were created with the Gutenberg block editor. But I have hundreds of older posts that were created with the Classic Editor, and there is where the mess is.

Please see 2 examples of such posts:
https://alex.bandiwork.dev/2015/12/romania-bucegi-brana-aeriana-31-octombrie-2015.html
https://alex.bandiwork.dev/2013/11/hasmas-cabana-piatra-singuratica-varful-hasmasul-mare.html

1. Images don’t fill the entire width of the Content container (1200 px).
2. Some text paragraphs are not limited to the 710 px max-width as they should.

I can see that some of the images are actually wrapped in div or p tags and that some paragraphs are wrapped in div tags, but I don’t know how to solve this mess.

Please tell me there is a fix for this :(( It would take forever to edit so many posts one by one….

Thank you so much!
Alexandra

[Elvin]

This is pretty tricky to solve as some elements are wrapped in div that as no attributes we can select them from.

But try this out.

@media (min-width:769px){
.entry-content div {
    max-width: 700px;
    text-align: left;
    width: 100%;
}
}

@media (max-width:768px){
.entry-content div[style="clear: both; text-align: center;"] {
    margin-left: -30px;
    width: calc(100% + 60px);
    max-width: calc(100% + 60px) !important;
}
}

I can’t guarantee this’ll work on every single page as I’m not exactly sure what other elements are being used other posts’ contents but if we’re lucky, this should be good enough for the older contents.

[Alexandra]

Yes, this indeed is tricky because, for these old Classic editor posts, the div style=”clear: both; text-align: center;” includes images AND text.

And my goal is to have text limited to 710px width, and images & galleries fill the entire Content Container (1200px width) or at least display full size.

So the code you gave me does not help with this goal, but it did help me understand things better, so thank you!

Unless there’s a magical quick fix I’m not aware of, I might have to edit all these old Classic editor posts and convert them to blocks. Unfortunately for me, as I have a couple of hundreds 🙁

[David]

Hi there,

i took a look and unfortunately theres no magical fix. The major pain is the old classic editor wrapping images in side a paragraph, compounded by some markup being different. So no easy way to contain some elements and not others.

[Alexandra]

Hey, David!
Thanks so much for looking into it!

I have 2 questions:

1. As far as I can see in this post, for example: https://alex.bandiwork.dev/2015/12/romania-bucegi-brana-aeriana-31-octombrie-2015.html

I have images wrapped in 3 different types of P pags:

A. Simple p tag
B. p style= “text align: justify;”
C. p.image-grid-item-2

I found a PHP solution that you gave in an older thread:

// Remove P Tags Around Images 
function filter_ptags_on_images($content){
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

and I applied it and it worked for the simple p tags (case A) but not B and C.
(I have deleted the PHP for now.)
My question is: is there a way to unwrap the other p tags (B and C) too? And, if yes, is there a way to afterwards wrap the images in div?

2. I have an issue with galleries with multiple rows. Example: https://alex.bandiwork.dev/2020/08/fagaras-traseu-cabana-capra-podragu-podragel.html

http://prntscr.com/ve1tts

So the first row (the row with 2 images) is displayed correctly, but the second row (that only has 1 image) gets limited to the 710 px width that I have set just for paragraphs. How can I fix this?
I want any type of media (simple images or galleries) to fill the entire Content Container (1200px) and paragraphs to be limited to the 710 px width.

Thank you so much!

[Alexandra]

Have you received a notification for the above?
Thank you so much!

[David]

Sorry for not responding sooner – i have asked Tom to take a look to see if he has any smart ideas on this. I’ll give him a nudge today – but he’s 7hrs behind GMT.

[Alexandra]

Oh, wow! Thank you so much, David!
I highly appreciate this!
I’ll be waiting patiently 🙂

[Tom]

Hi there,

1. This would be tough – it needs some specific regex (what your function above is using) to match those conditions, but I’m not great with regex, unfortunately. One option is to ask over on stackoverflow.com – someone might be able to provide the correct regex for you.

2. Right now you have this:

.comments-area, body.single .entry-content > p, hr, li {
    max-width: 710px;
    margin-left: auto;
    margin-right: auto;
}

Try replacing it with this:

.comments-area, body.single .entry-content > p, body.single .entry-content > hr, body.single .entry-content > li {
    max-width: 710px;
    margin-left: auto;
    margin-right: auto;
}

Let me know 🙂

[Author]

Posts