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?

[MementoMori]

Have you checked if it works ok on mobile phones?

No, but I throttled the resolution down on a few different monitors and it seemed to work. Anything below 1200ish monitor resolution would normally result in my 950px header banner getting shoved off the side of the site, but with the minimum in place, it locked everything in place, and just forced you to scroll horizontally in the browser, which was exactly what I was going for.

Thanks for the help, folks!

-M