Blog Post Full Width with No Container

[claireclausig]

My Blog Index page with all the different posts on it doesn’t have a container, which is what I want. But I can’t make the actual posts themselves without a container. I’ve done the stupid CSS:

.single-post #x-site > div.x-container.max.width.offset {
max-width: 2000px;
width: 100%;
}

But when I do that, the breadcrumbs at the top get shoved over to the left, then I have to add padding to that, and the top and bottom of the container still have padding there, and this should really just be an option without code. Is there a setting for it?

[nabeel]

Hi there,

Thanks for writing in! Try replacing your code with this:

.single-post .site > div.x-container.max.width.offset {
    max-width: 2000px;
    width: 100%;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[claireclausig]

Did you actually read my question? The code you provided is literally the exact same thing (minus the class name) I just said was not helpful and that I did not want. I definitely don’t need tutorial on CSS, I’m well aware of how to use it. I’m just saying that this should really be an option within the X Theme layout display options and I can’t believe it’s not.

[Prasant]

Hello @claireclausig,

Thanks for updating the thread.

I am really sorry for the confusion. You will have to make the changes using CSS. Please replace the code with following and let us know your feedback:

.single-post .x-container.max.width.offset {
    max-width: 100%;
    width: 100%;
}

Thanks.