Can I set a different container width for my Home page?

[direys]

I want my home page to have photos that span the full width of the browser, but the rest of my site is primarily text that I’d prefer to limit to a max width of 1000 pixels or so.  Is there a way to do this?  I’m faking it for now by using 20% Left and Right padding to the content area, but when I reduce the browser width, I would prefer for that padding to go away.

[scrambler]

Read the thread below for Full width designs.

http://forum.weavertheme.com/discussion/11124/full-width-designs

You are pretty much on the right track by making the Whole site very large and then restricting the width of the content you want contained, and this is option C) in the tutorial.

But instead of using a 20% right and left padding, what you want is use a max-width:1000px;  with centering option or rules (margin:0 auto;) so that the space on each side progressively disappears as the browser gets smaller.

The tutorial explains how to do that depending on the areas involved.

If you want that to only apply to the home page, you will probably need Custom CSS rule use the page id class to apply all these only on the home page.

If you need more help with that, we will need a link to the page with specifics

[direys]

the website is http://www.direys.com/

So far, I have my header in the header widget area so I can split the menu to both sides of the logo.  I’d like to learn how to scale the logo down as the browser shrinks.  I saw your post below the tutorial explaining how to do that if using the Header – is the method the same for the header widget area?

The home page is the only one I want to have full width.  Right now I have three images that scroll in “parallax.”  Is there a way to put these into the background so I can have a full-page background container but a max-width content container for the rest of the site?

I’m also interested in having the main menu sticky to the top (and the header logo, if it can scale down).  How can I achieve this?

[scrambler]

1- When I shrink the browser, as soon as the middle widget gets smaller than the initial image size, you logo image scales just fine. Have you tested different browsers? Or are you saying you want it to start scaling down sooner? if so make the middle widget smaller.

2- If you only want the home page full width, put the max width you want in the Theme width box like 1000px, then add the rule below in Main Options > Fonts & Custom > Custom CSS rule box to make the home page full width

.home #wrapper {max-width:9999px;}

3- Normally there is a fixed top insertion area you could use to have a fix header, but given you are using multiple widgets, it is easier to use custom CSS to fix that.

I assume you only want to fix it on desktop, as on mobile devices it would waste a lot of the space. If so, you can use the following rules

.is-desktop #header {position:fixed;background-color:grey;top:0px;z-index:1000;}

.is-desktop #wrapper {padding-top:220px;}

[direys]

Thanks, Scrambler 🙂

1) I hadn’t noticed the image scaling – that’s great!  I also moved it to stay beside the menu bar so it remains scaled down when the browser flips away from “desktop”

2) The combo I want is to have the Theme width at 9999 so my header and footer are always full-width, but I want the container area max pixels to be limited to say 1000, so my post articles are easy to read.  When I do that, the images on my home page also become limited in width, which I don’t want.  Is there a shortcode I can add to the Custom CSS rule box to affect the container width of the home page?

3) With moving the image to the side of the menu as the browser scales down, I think the whole header widget area stays short enough to stick to mobile devices.  I guessed to leave out the .is-desktop on those lines, and it seems to be working.  The only problem is that my widgets seem to have a transparent background, so they get a little lost when the photos scroll underneath.  How can I get an opaque background to stick with it?

[scrambler]

2) If what you want is a max width on container except on the home page, use the max-width box in the Wrapping Areas > Container Area, then override it for the home page with

.home #container {max-width:100%;}

3) You have a syntax error on the background-color property (missed the k), so there is no background color and when you scroll it is transparent.

Space wise it is up to you, but on phone, it waste quite a bit of space.
You could keep it fixed on desktop and small tablets with

.is-desktop #header, .is-smalltablet #header  {position:fixed;background-color:grey;top:0px;z-index:1000;}

.is-desktop #wrapper, .is-smalltablet #wrapper {padding-top:220px;}

[direys]

Thanks so much, Scrambler.  This has helped my understanding so much – I think I can keep playing now.

[scrambler]

There is something weird with your site that is preventing me from reducing the browser width below 625px. I wonder if you have fixed the width of some content somewhere using a fixed pixel value.

Digging I also found some bad CSS on the image tags in the prefooter area.
You have
style=”max-width:100%;align center”

align center is not a valid CSS property. The valid syntax is   text-align:center; but in this case it does nothing, so you can just remove the bad css.

If you were trying to achieve something you may want to explain what

[Author]

Posts