restricting template width below certain threshold?

[MementoMori]

Hello, I am wondering if it is possible to set my cart width by %, but have a sort of minimum built in. In other words I would want the code to read "fill 80% of page at any resolution, BUT not below 960px".

I love the way the % rating fills the page at higher resolutions, but at anything below 900ish pixels, my header banners get shoved off the side of the page.

The only other solution I could think of is to write a resolution-dependent javascript that will load a short banner for lower resolutions, but having to remember to make a few different versions of each banner will quickly get annoying.


Thanks!

-M

[rstevenson]

Have a Google for the CSS property min-width. It's not entirely simple to use it, and browser support is mixed, but I see it being very useful in the situation you describe.

Rob

[MementoMori]

Thanks! It worked like a charm!

For anyone else wanting to try this out, I just dropped it into the following entry in my stylesheet.css

}

#mainWrapper {
text-align: left;
vertical-align: top;
width:70%; /* sets the width of the store */
min-width:950px;
background-color:#252525; /* gives the store a grey background */
}

-M

[SPH]

Also, the Cherry Zen template has a min/max width. Never looked at how it was accomplished, but may be similar to Rob's.

[gjh42]

It would be done just that way. min-width and max-width would both need to be after the basic width declaration so they can control in the relevant situations.
IE6 doesn't support min-width, and IE7 support is buggy, but all modern browsers will support these fine.

[dgent]

Have you checked if it works ok on mobile phones?