Changing site width

BB Theme
1

Hi - I’ve changed my site width using the following child css:

.fl-full-width .container {
width: 1240px;
}
.fl-row-fixed-width {
max-width: 1240px;
}

Problem is I’m using a fixed width on the container so it’s no longer responsive. If i use max-width the layout breaks.

What’s the best / proper way of doing this? Thanks.

2

Hi Mark,

Can you provide a link to your site, so we can take a closer look, please?

Thanks,
Danny

3

[Content Hidden]

4

Hey Mark,

Can you elaborate a bit on what you’re trying to do? Are you moving from a full width layout to a fixed width and want that width to be 1240px? Or are you just trying to modify the width of the fixed width rows? If it’s the latter, you can adjust this under the Global Settings.

Ben

5

Hey Ben,

The latter - i.e. change the width of the content area of the site (including header and footer) leaving containers full width - what global settings where exactly? Are you talking theme or plugin settings?

Thanks.

6

Ben - found the Builder global settings (can’t believe I missed them - was looking in Admin/Settings/Page Builder) and have removed my css.

However the theme (BB) also needs to have same width (header, footer widgets, footer etc) so my question is really how do I do this (can’t see an option in customise)?

7

Hi Mark,

Can you try using the following CSS, please.

.fl-page-header-fixed .fl-page-header-container,
.fl-page-header-primary .fl-page-header-container {
  width: 100%;
}
.fl-row-content.fl-row-fixed-width.fl-node-content {
  max-width: 100%;
}
.fl-page-footer-widgets-container.container {
  width: 100%;
}

Also, you may need to add padding-left and padding-right.

Thanks,
Danny

8

Thanks Danny, will try in the morning.

There really should be an option for this under Customize though shouldn’t there?

9

Hi - no good I’m afraid - makes whole page - header, content and footer - full viewport width.

10

Hey Mark,

Are you going to be using this on a live site? Sorry for the question, I just thought the site you shared above looks like you’re still playing around with the BB settings. :slight_smile: This setting is already available on the 1.5beta version of our theme which you can download on your accounts page. If you want to use this on a live site, you can use the same CSS you have above, just make sure to place them inside a media query like so…

@media (min-width: 1200px) {
  .fl-full-width .container {
    width: 1240px;
  }
}

Ben

11

Hi Ben,

This is right back to square one I’m afraid. How do I explain this better …

Here’s a video:

First without the width change - see how the header is fluid and moves in, keeping its outside margin, when the browser is resized (ignore breakpoint where my transparent background is foobard - that’s a fire I have yet to fight).

http://screencast.com/t/9Wi84iMctYu

Now with your fix - see how the fixed width stops the header from behaving fluidly. When the browser window reaches it it disappears off canvas instead:

http://screencast.com/t/TIadDwG50vXX/

So, per my original question, using “width:” causes this problem so is no good. Using “max-width:” instead destroys page layout.

Thanks.

12

Hey Mark,

Sorry, it seems I’ve miscalculated the values on the code above. I’ve added this to your site on the stylesheet’s most bottom part. Make sure the media query’s width is greater than the width of the container, about 80px difference, for allowance.

@media (min-width: 1320px) {
  .fl-full-width .container {
    width: 1240px;
  }
}

Ben