Blurry Thumbnails in Mystile Theme

Hi!
I hope you found a solution to this?
I found this reply to the same problem:

cimplicity
Member
Posted 1 month ago #

I’ve been looking at this as the site I’m developing for a client has the exact same problem.

If you are using one of the custom colour style sheets then they override wp-content/themes/mystile/css/layout.css.

Check in wp-content/themes/mystile/styles and the relevant colour css sheet is in there. Its on line 4150 or Paragraph 7 – Woocommerce /* 7.2.1 Single Product */

Now, I just don’t know where to go find the “wp-content/themes/mystile/styles” – path ???

You can adjust the thumbnail sizes in the woocommerce > catalog tab. The thumbnail resizing options are at the bottom. You will have to play around with the sizes to get what you want. Basically what is taking place out of the box is the thumbnail sizes generated don’t match up well with the css of the theme so images look blurry.

There are likely other measures you could take to remedy the image issue, but this in my opinion is the easiest solution. If you want to fix other thumbnails auto generation sizes you can do that in WP Settings under media just to be sure you don’t have 8 different thumbnail sizes being generated.

Good luck.

Thank you!
I’ve tried all kinds of sizing …The thing is that the thumbnail image is one upload – and that same img. shows in all 3 versions – catalog/store front, single product(on the product page) and as small sized thumbnails in ie. the basket. I’ve solved the product page issue by setting image to 60% in the custom.css. The basket thumbnails are so small, you don’t even notice the blurry appearance. So, that leaves me with that one problem: the store front images look ridiculously foggy!
Not exactly selling the product …
Check it out: https://www.forlagetmunay.dk/webshop

Any suggestions?
Thanks;-)

Hello,

I hope you found a solution, but if not this worked for me. Your original images should be 600px x 600px. I have used as small as 400px x 400px and the images are razor sharp throughout. If you want to see how it looks before you do it. https://www.avinstallations.ca Everything should be totally automatic after you add the css.

In your dashboard goto:

– The Mystile tab
– general settings
– display options

In the first box “Custom CSS” copy and paste this code:

ul.products li.product img {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E6E6E6;
display: block;
height: auto;
margin: 0 auto 1em;
padding: 0.53em;
width: inherit;
}

.images img {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E6E6E6;
padding: 0.618em;
width: inherit;
}

Thank you very much for your answer and help!
I was advised to try setting the width to auto everywhere in the grey.css where it said 48%. That did actually work – with a slight difference in sizing – but nearly not visible. The images are sharp. But next time (if ever) using Mystile I will try this out. Kept your instruction ??