Responsive Engine: Full-Width backgrounds and Header / Footer Rows

Hi there!

I’m new to the responsive engine, but not responsive design in general. There are a few things that I am used to doing , that I am wondering if are possible here:

How can set the overall page container to 100%? I’ve got the page container type set to row and the preset page width set to “full-width” but I am only given the option of setting the width of the UI builder as a fixed pixel value. I can specify a really width screen size, like 2560px but this is not going to be elastic and adjust to bigger or smaller screen sizes, so it’s not ideal.

The reason I need to do this is because I want to use full-screen image backgrounds (with no margins) behind my content and I also want the header and footer to be edge-to-edge 100% width.

Right now the background image and header and footer groups can only extend to be as wide as the UI builder width, which results in unwanted margin down the left and right sides of my pages.

I’ve attached a quick mock-up of what I’m trying to achieve was well as the current layout properties for my page. If there is a tutorial that demonstrates this, and you can share the link, that would also be amazing.

As always, I really appreciate any help :slight_smile:
Tim

Hi Tim,

There’s often more than one way to go about achieving a particular layout. I put this working example up on Buildshare. The header is fixed while the footer scrolls. Is that close to what you’re after?

-Steve

EDIT

Also, just FYI, there’s another forum that’s specifically for the new responsive engine.

1 Like