[perfettcParticipant]

Hi- my site is catholicnutrition.com

I would like my homepage, blog slider, and post images to be the full width of the screen (ie. 1500 pixels). But I don’t want my post text to be full width. I’d like it to be in a narrower container so that readers don’t have to scroll across the screen to read the text.

Sort of like the blog posts on:

http://www.precisionnutrition.com/precision-nutrition-level-2-certification-faq

Medium.com is similar in post text width. There is some science behind this from a user engagement perspective.

[Nabeel AModerator]

Hi there,

Thanks for writing in! Currently it’s not possible because of the global container. Use Blank – No Container | Header, Footer page template. You’ll find it under Page Attributes > Template in your page editor. For the post text, you can set a container with custom CSS. I see you’ve added the slider and the text in the same section. Remove the text from the slider’s section and add a new section for the text so this can be contained in a container.

Thanks!

[perfettcParticipant]

Thanks. Could you tell me the syntax that I would need to use to set the container width with custom CSS? And where would I enter that?

[RahulModerator]

Hey There,

Thanks for writing back!

Kindly go-through this link : https://community.theme.co/forums/topic/container-full-width/

Hope this helps!

[perfettcParticipant]

I don’t think that thread is going to help with what I’m trying to achieve. I am fine with how my homepage looks for the most part. I can make it full width and control the text areas by formatting them. It’s the blog article settings that I find have too wide of a text body. The blog editor automatically formats the text body width. I can’t fake it by formatting it a certain way.

Sorry if I wasn’t clear. For blog articles specifically, is there a way to have a narrower width container for text. But have the slider and inserted images be full width? This way, the viewer can enjoy the full width visual media while being able to maintain attention when reading the text without having to scroll their eyes horizontally? That’s the UX I’m trying to achieve.

[RupokMember]

Hi there,

Thanks for clarifying. You can use this CSS under Custom > CSS in the Customizer to restrict the width of the content of single blog post :

.single-post .x-main.full {
  margin: 0 auto;
  max-width: 850px;
}

If you want to do it for blog page as well, update the code to following :

.blog .x-container.max.width.main, .single-post .x-main.full {
  margin: 0 auto;
  max-width: 850px;
}

Let’s change the max-width value to your preferred value.

Hope this helps.

[perfettcParticipant]

That worked, but it also reduced the width of images/media on the blog. Is it possible to have the text body container be narrow, but have images/media full width? I totally understand if this is not possible, but I just wanted to ask.

[JoaoModerator]

Hi There,

The maximum size of your images will be the size of your container.

Let us know if we can help you with anything else,

Joao

[Author]

Posts