Problem responsive WIDTH of CONTENT?

[n_merciano]

Hi guys,

I am trying to solve a issue on a website:
https://www.womenwants.nl/spotlight/luxe-ringkussen-ivoor-met-zirkonia.html

When you resize the browser the product image and right side content COLLAPSES because of the fixed widths…
how can i solve this using media queries can somebody please help me?

I have tried media-queries and MIN-WIDTHS and percetanges but that doens’t work.

Thanks!

[PaulOB]

Hi,

You need to allow things to stretch so don;t give fixed widths all the time. Use percentages or where possible no widths.

A start would be to make that right column fluid.

.product-view .product-shop-info {
 width:auto;
 float:none;
}
.col1-layout .col-main .product-view .product-shop {
  max-width: 38%;
  width: auto;
}

Of course that will lead to many other smaller issues that you will need to tweak but will be a start

Your left column s also full of 500px widths that will not squash and you should really just have the width in percentages on the main column parent and then the children can have their width related to that and as the parent changes the children change width also. Remove the 500px and 550px widths and use a percentage for the column parent and then the children can either be 100% width or smaller if you want gaps or not have any widths at all.

Set images to max-width:100% and height auto to allow them to scale.

There are too many things for me to cover them all but you will just need to work through one issue at a time.