Renew Bands advice - post full width

[Donkified]

Hi guys,

multiple licence holder here, need some urgent help please, many thanks in advance.

I’m currently using the renew bands site content

Home

That home page is what i want my posts to look like - ie, i want each post to have those full width bands. The home page template is ‘Blank, no container, header, footer’.

However, when I save that page template and apply that template to an individual post, there is a container and i cant make the bands go all the way across full width.

Can you advice how i can do that and easily replicate it across all posts? Im trying to make my posts look like this essentially. https://backlinko.com/on-page-seo#optimize-for-ctr

[rad]

Hi @Donkified,

Thanks for reaching out.

Blank templates are only applicable for pages, you would need a custom CSS to achieve that for posts. Please check this related thread Full width post not working

Please note that we don’t custom development or codes here in the forum. What’s provided is just the idea on how to achieve it and we can’t maintain or provide support to what’s given. This tutorial may help in the future https://vegibit.com/css-selectors-tutorial/

Thanks!

[Donkified]

Hi Rad,

So I went to theme options, then added this into the css area

.single-post.fullwidth .x-container.max.width.main {
max-width: initial;
width: 100%;
}

Is that the right place? And where do I add the fullwidth part specifically? Is it somewhere in theme options? And do I just write ‘fullwidth’ ?

(from the directions you referenced above)

" And after that, please edit the post that you want to have a fullwidth layout. Find the Post settings and insert fullwidth in the body class. To know more about the Post settings meta box, please check this out:

Thanks

[jade]

Hi @Donkified,

Usually, it is not necessary to add some custom codes to make the blog post display fullwidth.

Just go to X > Theme Options > Layout and Design > Content Layout then set it to Fullwidth.

Setting this option will set all the blog post fullwidth.

The suggestion made in the other thread is when you want specific posts to display fullwidth where you add the class fullwidth to the post’s Body Class(es) option.

And yes, you may add the css code in X > Theme Options > CSS:

Hope this helps.

[Donkified]

Hi Jade,

Thank you for your reply.

I just cant seem to get this to work…and I have followed your instructions to the letter.

the posts always have a white border around them and i cant get the rows colour to stretch all the way to the edge of the screen like this https://backlinko.com/on-page-seo#optimize-for-ctr

Is it something to do with posts and renew maybe? The full width template that i want (like that example above) works fine on PAGES just not posts, even with your suggestions.

Thanks again

[ruenel]

Hello @Donkified,

Your code is not working because you are using the incorrect class selector. The code should be:

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

If you are interested you can learn more about CSS selectors and details here

Hope this helps.

[Donkified]

Hi Ruenel,

Thank you for your reply.

I was just following the directions from you guys.

But what you have said is the exact same as what Rad said above.

So what’s the difference

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

[jade]

Hello @Donkified,

To make things easier, would you mind providing us the URL of the site in question? You have some sites in your account and I am not sure which one you are working on.

Kindly provide the link so that we can check the site directly.

Thank you.

[Donkified]

Hi Jade,

I put a secure not in the above reply from me for you

[Donkified]

Jade i just actually put the code in the css in other customiser area, and it works now

Before i was putting in in the css section in the ‘customise pro in theme options’ css section.

Does that make sense?

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

So your solution works now, I just want other readers to be clear, this code goes in the customiser css option (when you hit customise in the toolbar). Don’t then click into ''customise pro in theme options"

[jade]

Hi @Donkified,

The CSS code should work if you put it in the Theme Option’s CSS panel. Perhaps there is a CSS error in the codes you have. To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

But glad to hear it’s now working on your end.

[Donkified]

No you must have misread my post.

It is working

[lely]

Glad it is working now and thank you for the clarification!

Cheers.