-3

I hope you guys can give me a hand on this one because I’m at my rope’s end with this piece of inline CSS nightmare. So. I want to have two columns of product categories, changing the size of the actual columns wasn’t hard but I have the problem with the blurry images. They are way bigger than the div but they still look blurry.

Inspecting the .prod-img-wrap div reveals it contains a tag with no class or ID that has some in-line CSS that I assume it’s probably generated elsewhere.

All the sollutions online show a older version of WooCommerce that still had actual inputs for the image sizes separately, now in the Customize > Woocommerce > Product images panel there’s only the crop options available. If I change the hard coded values in the inspector, the image loads fine, so I know it’s uploaded correctly.

I don’t even know what else to try at this point, I’ve been going at it for too long and it’s literally one of the last few details that I need to get sorted to deliver this website soon. I’m also quite unexperienced in WordPress so this might be a easy or obvious one for the more seasoned coders amongst you. Any help would be greatly appreciated, thank you so much for your time.

The page I need help with: http://sellgoldnow.co.uk/

EDIT:

I am trying to override with css the inline style generated here:

<div class="prod-img-wrap"><img src="http://sellgoldnow.co.uk/wp-content     /uploads/2018/09/gold-bracelets1-262x108.jpg" alt="Bracelets" sizes="(max-width: 262px) 100vw, 262px" width="262" height=""></div>

With the following css:

.prod-img-wrap img[style]{
max-width: 705px !important;
width: 705px !important;
height: auto !important;

}

This is the part that I don't know how to "target" as I'm unfamiliar with the formulation, it's the first time i've seen it.

sizes="(max-width: 262px) 100vw, 262px" width="262" height=""
Andrew Zotinca
  • 1
  • 1
  • 1
    Welcome to StackOverflow! In order for us to help you better, can you please update your question so that it shows your **existing code** and details any failed [**attempts made so far**](http://meta.stackoverflow.com/questions/261592) in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve), along with clearly stating what your desired **result** is. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) – Obsidian Age Sep 05 '18 at 02:58

1 Answers1

0

firstly, the images are blurry because their actual size is much much smaller than the area they are being made to fill. [they are only 262px x 108px and they are being stretched to 703 x 277px] So i would say you need to be adding larger images.

Secondly, if you are adding much larger images and the woocommerce is cropping it, try the plugin "Regenerate Thumbnails" [has million+ downloads]and go through those steps.

Lastly once you have added larger images and its still not working correct, try changing the thumbnail cropping settings in customiser. I would suggest 1-1 or uncropped.

Let me know if this helps!

EDIT:

to target those images you can use this class + code to override it:

ul.products li.product.product-category img,
ul.products li.product img {
    max-width: none!important;
    width: auto!important;
}

this will ensure those images display at their actual size.

Moose
  • 323
  • 1
  • 13
  • Thank you for your reply. The issue seems to be from here where the inline style is generated in html. – Andrew Zotinca Sep 05 '18 at 11:49
  • are you aware of the inspect tool in browsers btw? – Moose Sep 05 '18 at 12:41
  • I tried putting that CSS in the child theme stylesheet, it loads but now the images are small and if I try to replace width and max width with specific values, I end up in the same spot with large, blurry images. – Andrew Zotinca Sep 05 '18 at 13:43
  • And yes, I do use the inspector tool, what I just can't figgure out is how to override those pesky in-line sizes that are set in the prod-img-wrap div's img – Andrew Zotinca Sep 05 '18 at 13:44
  • " I end up in the same spot with large, blurry images." - The code i provided just overwrites the inline styles and sets the images to their _real_ size. As i said before your images are **too small**, thats why when you make them bigger by giving them new widths they are blurry. – Moose Sep 05 '18 at 13:46
  • I see you added larger images and since that has resolved your issues my answer was correct, so you mark the answer as so, so the community can see it is resolved please! – Moose Sep 06 '18 at 11:02