[Resolved] Container settings on an Element

[Matthew]

Hi,

Hope you are well 🙂

I am using the “Header” element to insert the blue newsletter opt in bar at the top of my page (see linked page).

I also want to replicate this in the footer, so I am using a Hook to do this, figured this is the best way?

Hooks obviously don’t have the same settings as Header element so I am trying to replicate using CSS.

If you look at the page you will see I have virtually managed to do this apart from I believe the container element of it. As it’s to the far right.

How do I set the container to match?

[David]

Hi there,

you can add an inner container with the GP grid-container class like so:

<div id="footer-smalloptin">
    <div class="grid-container">
        Column content in here
    </div>
</div>

[Matthew]

Hi David,

Thanks for this! Got a strange issue though..

The background is showing different parts of the background at the top and bottom on mobile.

Can’t figure out why it’s doing this, doesn’t do this on the header element.

It’s hard to explain please see this image:

View post on imgur.com

Any ideas why it’s doing this?

[David]

In your #footer-smalloptin CSS add a background-size: cover; property.

[Matthew]

That’s great thanks! All sorted.

[David]

Glad to be of help.

[Author]

Posts