Full Width Banner

[tomtomg]

So I'm after a full width banner our homepage, in the same way www.bluepark.co.uk have. In my limited experience it looks like this may be some sort of extension of the header? Or perhaps a second "fake" header underneath the first, sharing the CSS?

Or I could be totally wrong and there's a really simple way of doing it

Cheers,
Tom

[Mikey]

Or I could be totally wrong and there's a really simple way of doing it

Hi Tom,

This depends on how your template is set-up or more specifically the width it is set to, so in order to have full-width sections on your website your template will need to be set globally at 100% width (to check this go into: Template Editor > Pages and under 'Settings for All Pages' look to see what's selected next to 'Page layout').

Most of the newer templates are set to 100% width to allow the header, footer and carousel to span the full-width of the screen, but also contain some CSS and jQuery to restrict the width of the mid-section where the products, product page etc. are located as these don't look great or provide a good UX on the eye when spread-out across a larger monitor!!

So as creating a new block that contains the image for your banner would sit inside this mid-section, you would then need to add some CSS to target that specific block to override it's inherited restricted-width to allow it to 'break free' and span the full-width.


Hope that makes sense,

Mike

[tomtomg]

Ah, it does make sense
Yes, the theme is set to 100% width with a Fixed Width Value of 1600px. As you say, the header and footer span the page.

Any chance you know what css may do the job?

Cheers,
Tom

[Mikey]

Any chance you know what css may do the job?
Tom

When you create a new block it's assigned it own unique HTML I.D that you can then target via CSS. So to find this out, go into 'Block Editor' > 'Properties' and scroll down to 'Variable for HTML' - now make a note of just the number.

Now lets say that number is 35 for example purposes, you can now add the following to the CSS to make that particular block 100% width:

#cb_id_35 {
max-width: 100% !important;
}

Be aware though that if either of the left or right block columns are enabled, then the full-width WON'T work!! However, I assume you want the banner on your homepage and as such, you wouldn't really want these columns displayed there.


Let us know how you get on,

Mike