Create full width background section in blog post

[djinnie]

Hi,

As you can see the blue background section is not ‘full width’ of this blog post as it still has some white margins on the left and right side.

Also, how can I delete the h1 title ‘golden retriever’ (of this specific blog post) and create custom h1 header which I then can integrate into the header? And a cool full header image for this blog post alone? Same goes for the footer of this blog post. Also want to create a cool ending.

Thanks.

[christian]

Hey @djinnie,

It’s possible to make the single post fullwidth by adding this simple CSS in Theme Options > CSS.

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

Regarding replacing the post title with a custom header, that is currently not possible. In the future, it will be. Please see the planned Layout Builder Cycle in our previous status update at https://theme.co/apex/forum/t/status-report-july-31-2018/39909

For now, please consult with a third party developer or follow this tutorial from another user: https://benryan.com.au/themeco-full-width-parallax-featured-image/

Thanks.

[djinnie]

@christian_y

It’s possible to make the single post fullwidth by adding this simple CSS in Theme Options > CSS.

Is it possible to add this code to a certain section of my post? As I don’t want to change all the posts on my website. Also I don’t want to change the complete post to full width 100% layout. I only want certain sections of the post to full 100% width lay out.

[mldarshana]

Hi There @djinnie

To target specific posts of your website, you can replace .single-post with your post IDs for example postid-53 . You can locate posts IDs by following this guide (https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59).

Could you please try using the following code instead and see if that is what you’re trying to accomplish. However, you need to hide the title and remove the padding of the entry wrap.

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

.single-post .entry-wrap {
 padding: 0;
}

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

Let us know how it goes.
Thanks!

[djinnie]

If I understand you correctly then I change the whole post when I add that code.

What I’m trying to accomplish here is the following:

My post has, for example, 10 sections.

I want section 1 to be full width.

I want section 2 not be full width.

I want section 3 …

I want section 5 to be full width.

etc. etc.

Is this possible?

[djinnie]

@mldarshana

However, you need to hide the title and remove the padding of the entry wrap.

What do you mean by this?

[christian]

Darshana meant that you should hide the title because otherwise it would look like the screenshot below if the entry wrap’s padding would be removed. And, I just realized that you also need to add margin: 0 to the .single-post .x-container.offset.

All of that are important to achieve a look like the Blank No Container of the page post type where you can achieve a full width section. The section’s content would be contained by the row’s Inner Container option.

The actual required and optimized code to achieve that is this:

.x-container.offset,
.entry-content {
  width:100%;
  max-width:100%;
  margin: 0;
}

.entry-wrap {
  padding: 0;
}

.entry-header {
  display: none;
}

Like any other custom code, please note that we are not responsible for issues that would arise from the use of it and further enhancement from here on because our goal here is to show you that it’s possible with a bit of custom CSS.

Hope that helps and thank you for understanding.

[djinnie]

@christian_y

.x-container.offset,
.entry-content {
width:100%;
max-width:100%;
margin: 0;
}

.entry-wrap {
padding: 0;
}

.entry-header {
display: none;
}

I just tried this but now the whole blog post is 100% width. I only want specific sections to be full width.

Do I need to use the padding of a section to make it less width than 100% for the sections I don’t want it to be 100% width? Or is there a better way?

Thanks.

[christian]

To make the content area span fullwidth is the main point of the code because otherwise, you will not be able to make your sections span fullwidth at all.

I’ve already explained that in order for your content to be contained like in my previous screenshot, you need to enable the Row’s Inner Container.

You can also add padding if you need to.

Please note that we went above and beyond here by showing what isn’t readily available in our theme yet because we thought it’s simple. But, this is turning out to be complicated.

If the guide does not help, please remove the code and consider consulting with a third party developer to achieve your requirements. Or, please stay tuned for the Layout Builder.

Thanks.