How to get reusuable element to stretch across the full screen

Hi all,

I have read a couple posts on this but can’t figure it out. The header will not stretch the full length even when selecting “wide screen” from the dropdown (1200 px). I understand I am suppose to use a floating element. However whenever I use a floating element I can’t click on anything in the reusable element.

Thanks to anyone for their time willing to help me.

Thanks!

So there are 2 things here: if it’s having a group of elements, you can’t make it as wide as the page, so you have to define a width (for instance 1200px). But what you can do (and I think that’s what you’re talking about) is to have a screen wide stripe that have the same color from one end of the screen to another. That’s done with ‘adding a stripe’ when you edit the page. Double click on the page area and click on ‘Add a new stripe’.

1 Like

Exactly! That’s what I’m talking about. Thanks so much.

1 Like

Hi @emmanuel, so I just saw this but the stripe function isn’t here anymore! What do we do now?

Thanks so much!!

Correct, the stripe function was depreciated.

To do so now, when you’re building the page and have “Enable responsive page rendering engine” checked, then draw the object across the full length of the page. And, for the object you draw, be sure that Apply a max width when the page is stretched" is not checked.

Hi @dan1, thanks so much for your message! I’ve tried exactly that, but it’s still not stretching all the way across the page. See below for snippets of the editor and the preview screens:

Weird, right?..

It’s hard to tell from the screenshots you shared. (Close cropping cuts off some of the helpful tidbits).

It appears that the page’s original width is is 1800 pixels (px) wide (which is very large for a standard display; I would recommend being at 1200px).

The difference is likely attributable to the header you’re working on being 1317px wide but your page being significantly wider (1800px)

Hi @dan1, oops! I’ve reposted with better cropping skills. I readjusted the width and the problem is still there. I’m really lost. Thanks so much for your help :slight_smile:

See below:

I would also like an answer to this question. running into this dilemma. Can someone please help?

Need a way such that header can be a re-usable element, otherwise I’ll have to repeat the header on every page. However when I add the header (reusable element), page becomes centered instead of full screen. Any ideas?

Never mind. I figured it out - I am posting the solution so it can help someone facing the same situation in the future.

My header template was not responsive. However the option in the reusable elements is named “Enable New Page Rendering Engine” (which is a bit un-intuitive), instead of something with “responsive” in it. Once I enabled it, it started working fine.

1 Like

Hello
I am encountering the same problem as you are
how did you enable the option? I do not find it on my reusable element, neither in the UI builder or responsive section

Thank you very much