[Resolved] Hero title background full-width

[dorian]

Hello,

I am trying to extend the heading background I’ve placed on the hero header.
I managed to do it with padding – but it’s not very responsive.

How could I extend the transparent background to 100% width of the hero?

Appreciate your help!

[Elvin]

Hi there,

I’ve checked the link and the page doesn’t seem to exist as shown here: https://share.getcloudapp.com/6quQPNPX

Can you check the link again (or perhaps update) if there was any page change?

If the page hero used on all pages are the same, try this:

If you want the transparent background color to be on full height and width overlay over the background image:

Remove the background: rgb(0,0,0, 0.6); you’ve added to .page-hero h2 and add this CSS instead.

.page-hero:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0,0,0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
}

.page-hero .inside-page-hero {
    position: relative;
}

If you only want to make it full width, you’ll have to change a few settings on the Header Element.

Remove left and right padding or assign 0px value to them.
Set Inner Container to “Full-width”.

You then change how the h2 element is added to this:

<div class="full-width-container">
<h2 class="grid-container"> {the content added} </h2>
</div>

We basically added the grid-container to h2 and wrapped it with a div with class full-width-container.

We then apply the background to the full-width-container instead of the page-hero h2 by adding this CSS:

.page-hero .full-width-container{
background: rgb(0,0,0, 0.6);
}

[dorian]

Thanks Elvin, appreciate the first solution although it was not necessary.
I got the background full-width with .page-hero h2 css. My concern was that with full width inner container text would be from edge to edge of the screen. I simply <br> it – which did not occur to me before.

Apologies for 404 – I was transferring domain last night.

[Elvin]

My concern was that with full width inner container text would be from edge to edge of the screen. I simply <br> it – which did not occur to me before.

The “contained” value for Inner container means it will use the container width set on Appearance > Customize > Layout > Container or a Layout Element. If this was set to a very high value, you won’t notice that it’s being “contained” even if it is.

If you made changes with the container width then it will affect the inner container if its set to “contained”. 🙂

No problem. glad you got it to work.

[Author]

Posts