Responsive Fixed and Fluid widths

My product detail page is using a combination of fixed and fluid widths. I’m having trouble when the page is scaled down to about 1024px wide. The product description jumps down because it runs out of room. I’m wondering what I might try to keep things in place.

Otherwise, I could try something responsive, that would move the side navigation down beneath the product images once a min-width was reached.

I’m grateful for any suggestions.

You’ll obviously just have to make sure there is enough room :). I don’t have access to your site due to me b eing at work, but you should try and set a minimum width (min-width) on your columns. Then make sure the wrappers min width is equal to those columns. That will ensure even at small resolutions, it won’t drop.

However this means that scrollbars will appear if you are willing to live with that.

That’s probably one of the better solutions.

Thanks for attacking the fourms, RyanReese! I like the min-width idea on the columns, then to set one for the wrapper. I can see that there’s just not enough room for all three columns as the browser width gets less wide. I’ll target it with a media query instead.


Yeah at that point, if you need to make sure all data is clearly shown, you probably shouldn’t keep them as 3 columns, because scrollbar’ing back and forth to see datai s quite annoying to users.

You’re welcome! :slight_smile: