Full width banner

Support
#1

Hi,
Can someone help me make this “keyboards” banner full screen?

I spent some time in pro editor trying to make this happen.
No joy. I can’t think of a way to make those banners full width,

I’m not a programmer - I’m trying to work with the tools provided.

Any advice greatly appreciated.

Thanks in advance.

MB

#2

This is what i would like it to look like:

#3

Hey MB,

This could possibly be solved by adding some custom CSS on your site but also depends on the setup of the header area. I tried to check the site but it requires a password to be accessed.

Would you mind providing the access so that we can check?

Thank you.

#5

Hey MB,

Thanks for providing the details. Please add this code to the Element CSS of the image element:

$el {
    width: 100%;
}

Hope this helps.

#6

thanks. i’ll try this just now.
Also - while i have you there - is there an easy(ish) way of displaying page title in the banner, where the work “keyboards” is at the moment (which is part of the graphic)?

#7

Hey MB,

In that case, you will have to make changes for the section.

#1 Instead of adding the image as an Image element, set the image as the background image of the section container.

#2 Change the row setting and enable the Inner Container option

#3 Add the page title as a Text element in the column.

Please note that if you use this approach, you will have to remove the text from the image itself and that use a large image as the background image.

Hope this helps.

#8

I have also made a wider version of the banner hoping that this will solve the issue. It didn’t.

See the image attached. Lime green is an extra banner size added.

#9

That is a very good idea!
I feel stupid now :slight_smile:

Thank You!

#10

You’re most welcome, MB.

#11

Jade - one last. If i may.

All seems to be working. However page title shifts to the right when you scale browser window up.
How to remedy this?

Have a look.
A is smaller window
B is window scaled up

Thank you soo much!

#12

Hey MB,

Please set the margin left of the text element to 0 then add this code to the Element CSS of the Text Element:

$el {
  text-indent: 1.5em;
}

@media (max-width: 1199px) {
  $el {
    text-indent: 2.5em;
  }
}

Hope this helps.

#13

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