Responsive Design Resize Issue

[Jack Swartz]

I am currently using the Habits theme. I have a responsive design issue. When the screen resolution gets smaller (from desktop to pad to phone) my products get chopped off. I have enclosed the following link so that you can see what I am trying to describe.
http://www.bodydynamics.com/responsive.design.resize.issue.html

When I change themes (from Habits to Fearless) the resizing issue disappears. The product is resized correctly. I am guessing there might be a bug in the css (bootstrap.min.css) or is there a setting that I can change.

Thank you in advance for your help.

Jack

[ShopSite Lauren]

Jack, thanks for showing this issue. This can be fixed with a little CSS, and we will add it into future releases of ShopSite. To fix it in your store, add the following CSS anywhere in your store where it will appear on your page (such as the header or footer field).

Code: Select all

<style type="text/css">
.prodgraphic img {max-height: 100%;}
</style>

[Jack Swartz]

Thank you Lauren! That did the trick.

Jack

[Jack Swartz]

Hi Lauren,

I spoke to soon. The fix that you gave me works on every browser except Firefox. In firefox the images of the products do not show up.

https://www.bodydynamics.com/store/maxzorbproductspage.html

Please advise on how to fix.

Thanks,

Jack

[ShopSite Lauren]

Jack,

Try the following:

<style type="text/css">
.prodgraphic span {display: block !important;}
.prodgraphic img {max-height: 100%;}
</style>

[Jack Swartz]

Thanks Lauren,

All browsers work now.

Jack