Columns not responsive on small screens

Hi,

I’m having a number of issues with responsiveness. I’ve created several product page templates (one for each product since each product needs to have its own custom page). They’re all basically the same template, I just swap out images in the different areas of the product page.

However, when I shrink my browser to simulate an iPhone, etc., the images don’t resize. In some cases they shift all the way to the left. The column that contains my product title, desrcription, add to cart, etc. gets squeezed so that all the text is in a single vertical line.

I know for the images I had to add some padding and/or margins to get them to fill the space correctly (on desktop) but I used fixed values and should use percentages. However, can you let me know what in general I need to do to make everything in my product template responsive? You can view a test page here: http://jetsettest.burbankseoexperts.com/lesjardins2/product/swatches-and-images-test-product/

I’m attaching screen shots of one of the images (shifted left) and the product description (single line of vertical text). Thanks for any help!

Attachments:

You must be logged in to view attached files.

Add New Note to this Reply