Customizing the Integrity Blog Post

Hi,

I would like the blog post featured image to display full width like a standard “no-container” page. I would also like to lose the title that comes with the blog post and create a custom title.

I tried adding the following for the width but it did not work:

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

Thanks for your help.

Hi There,

Please try with this custom CSS instead:

.single-post .x-container.max.width.offset {
    width: 100%;
    max-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

Regards!

Thank you - that worked! Is there any way to remove the gap at the top of the page between the featured image and the main menu.

Hello PJ,

Thanks for updating the thread.

Please try out following CSS and let us know the outcome:

.x-container.offset {
    margin-top: 10px;
}

In case above CSS does not works out then please share website URL for us to give you the correct CSS.

Thanks.

Worked perfect - thank you.

We are delighted to assist you with this.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.