Product images don't seem to be responsive

[tristam]

It seems that the images aren’t responsive.

I found the setting under Product Image Maximum width for maximum image size set to 284 so I changed this to 650 as my images are about this size and 650 seems to fit with in the area.

When I squeeze the page up they don't shrink and just overlap the page.

Am I missing something here?

[jont]

See my post #3 on http://community.sellerdeck.com/showthread.php?t=55697

[jont]

If you declare a px width to the images they will always stay that size regardless of the viewport (size of the window) ... you need to set the images to 100% wide and get them to fill the containing block ... the containing block can be set to various sizes depending on the @media query in the stylesheet so it is that which responds to the viewport and not the image itself.

You can play around with srcset for using different images on retina displays but this requires different versions of the same image creating and declaring against each product... either as variables or if you maintain the same naming convention and suffix the product filename with the same notation introduce them that way using the inbuilt ProductImageFileName variable and suffixing it accordingly.

[jont]

Take a look at http://www.tayloroldbondst.co.uk/aca...ck-J12588.html and you will see the image filling the containing space by 100% as you shrink the bowser down.

That site is SellerDeck v12 but the same concept applies

[tristam]

Jonty

Thanks for this. I have asked the seller support and they have managed to do it and are now looking to where to change this within Seller Deck.

I realised that the image should be 100% rather than an actual px width but in the setting it doesn't allow you to enter %

This sample is exactly what I am after.

[jont]

The theme in that example link was all bespoke work and nothing based on SellerDeck themes .... if you uses any code from that site please bear that in mind.

I think Duncan is right and I need to get down and dirty with these SellerDeck themes and start making the inbuilt responsive themes actually responsive.

[tristam]

Hopefully they will be getting back to me very soon with an easy solution as to where to change the code. They have already done it and shown me an example but are going to tell me what I have got to do.

I don't know how to amend a variable - yet

When I find out I will post here.

[Buzby]

Having a play around today I also noticed that smaller images that render correctly on a desktop are being stretched when on mobile.

have a look at http://www.Aqualitysilver.co.uk/Jewellery/test/index.html

Remove A from the url which is there to stop it being spidered.

Resize the browser and when the page goes to mobile view the size of the review stars increases and becomes very pixelated.

Note, I am only testing it and not looking for a fix, just an observation.

[jont]

Jason - if you do want a fix for the stars. In the CSS search for

@media screen and (max-width: 360px)
.fullWidthSection img {
width: 90%;
height: auto;
}

and comment out the width declaration

Not tested if that cascades down to other areas so use with caution ....

The other solution would be to use a 360px wide image for the stars so they reduce in size on the larger viewports and fill the full width correctly on the smaller viewports

[graphicz]

Have a look here - about responsive images - http://community.sellerdeck.com/show...60&postcount=7