Remove Blog Heading and Padding around Edge

Hi there,

I am trying to achieve exactly what this user is trying here: Remove blog header and page padding/margin

That is:
-remove blog auto header below featured image
-remove padding from each side of page
-make blog page full width

However, the code mentioned at the end of the post isn’t working for me.

.single-post .entry-featured {
display: none;
}

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

.x-header-landmark {
display: none;
}

I wonder if there is a new element etc that requires new code for 2020 - I am using latest Pro version.

Thanks, Tom.

Hi Tom,

Thanks for writing to us.
I checked the code on my local installation. It’s working properly at my end.

.single-post .entry-featured {
display: none;
}
.single-post .x-container.width.offset {
max-width: 100%;
width: 100%;
margin-top: 0;
}

It might be any CSS syntax error at your custom CSS code I would recommend you to check your CSS code or you can check it from this site http://csslint.net/ as well. If it does not work please share the site URL. We can check the code and provide a proper solution.

Thanks

Thanks,

I have tried this and whilst it does make it full width.

It doesn’t:
-remove blog auto header below featured image
-remove padding from each side of page

This is the same question as the post I quoted earlier.

Thanks.

Hello Tom,

It could be that you are using a different stack or that you have inserted a broken CSS code. To better assist you with your issue, kindly provide us the URL of the page in question (or in a secure note if you do not want to publicly share the URL of your site). Please create a secure note with the following info:
– Link to your site post or page

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Sorry for the delay here - I have updated the secure note.

CSS is on the Page CSS.

Thanks, Tom.

Hi Tom,

Can you provide us a screenshot of which part of the single blog page that you want to remove and one more thing, please add your custom CSS in Pro > Theme Options > CSS to apply to all single blog page.

Hope that helps and let us know how it goes.

Thank you.

Hi,

This is the same screenshot as here: Remove blog header and page padding/margin

Thanks, Tom.

Hello Tom,

Do you mean to display like this?

  • see secure note

There is no option to remove the post title. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.
Screen Shot 2020-12-04 at 8.05.09 AM

Therefore, your CSS code will be:

.single-post .entry-header {
    display: none;
}

Be advised that the code is just an example for you to get started. You will have to maintain the code whenever there are theme or plugin updates to make sure that the custom code do not have conflicts.

Best Regards.

Hi,

Unfortunately this isn’t it. What I am after is what the user wants as I mentioned in the link above.

This is the image from the link I sent you before.

image

Please would you also be able to reread my secure note about client confidentiality.

Thanks.

Hello Tom,

I have checked your single blog post and the Test Blog page. It does not display “The Blog” landmark header. What I noticed though is that you are using the Boxed layout. If you want to have a fullwidth blog page, simply go to Pro > Theme Options > Layout and Design > Site Layout and select “Fullwidth”.

For your test blog page, you will have to switch to Blank - No Container | Header, Footer page template. For more details about the different page templates in the theme, please check this out:

Hope this helps.

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