Narrow text, wide photos in blog posts

[atblue]

Theme: Pro
Stack: Integrity

Hi there … question for you. I’d like my blog posts pages to appear sort of like this:

https://www.nytimes.com/2018/05/10/magazine/justin-peck-is-making-ballet-that-speaks-to-our-everyday-lives.html

(scroll down on that page a bit until you see the embedded video or even further (not the ads) where it shows 'Peck overseeing a rehearsal of “Carousel” in March. photo to see what i mean)

Hopefully you can see that, but if not, essentially the blog copy/writing is in a narrow container of ~700pixels wide and some (if not all) of the photos in the content of the post are full container wide (or at least wider than the 700 pixel content container.

I have found this code to make my content container a size I want, and centered in the middle of the page:

Blockquote.single-post .x-main.full .entry-header,
.single-post .x-main.full .entry-content.content,
.single-post .x-main.full .x-comments-area {
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
}

That works, but then I’m unsure how to make the images (not just the featured image) a wider width than that.

Can you help? I’ll upload a screenshot to show if you are blocked from access to nytimes website.

Thank you!

[basanta]

Hi There,

Thanks for writing in!

As I don’t have access to your website, can’t see what exactly the content is right now.
If I understand properly you need the text content should be narrow than the image inside the content or video too.
I am suggesting you a CSS class (you can change the name) please add this to your theme option -> Global CSS. After that when you create the post just put this class with a DIV and inside that put your text content. Image and video content should be outside the DIV.

CSS

.narrow-content {
   max-width 700px; /* you can change the width as per your requirement */
   margin: auto;
   clear:both;
}

Content Example

<div class="narrow-content">
   Your text content should go here ..................
</div>

<image or video go here....>

<div class="narrow-content">
   Your text content should go here ..................
</div>

Hope this helps!

Thanks

[atblue]

That would probably work, thank you.

However, would rather set the overall text width (narrow content) and then just assign classes to the images to break the width (and become wider), due to the # of posts with long form content broken up with images … this just seems so tedious to have to do for 100-300 blog posts?

Is there no other way one can think of to automate the formatting of the posts to just do this?

(I appreciate your solution just don’t think it’s going to work for our needs … too manual!)

[rad]

Hi there,

Since there is no other distinction of which content, and it also varies which then the only workaround is applying the class manually. As for the break points, you can have it like this

@media ( min-width: 980px ) {
.narrow-content {
   max-width 700px; /* you can change the width as per your requirement */
   margin: auto;
   clear:both;
}
}

Then it will go full-width on tablet and smaller devices.

Thanks!