Image resizing on home page (product category)

1 Views

I have been working on resizing the images on my wordpress website, the images are not appearing on equal sizes or not aligning properly. But inside the product pages it looks normal size but in the shop/home page (products page) all images are appearing in bigger size. how to fix the image size in wordpress i have not idea. Please refer my website (www-dot-carolinegoodwin-dot-com and suggest me what to do and how to fix this issue.

Thanks much in advance for your help.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. The CSS of WooCommerce is stretching the images to 100% of their parent <div>, as seen here:

     ul.products li.product a img {
     -moz-transition: all 0.2s ease-in-out 0s;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     display: block;
     height: auto;
     margin: 0 0 8px;
     **width: 100%;**
 }

    You can simply remove or override that line using the !important declaration in another CSS file. Also, you can override it to width: auto and change the margin: 0 0 8px in that rule set to margin: 0 auto 8px auto to center those images in their div container.

  2. First of all, make sure your stylesheet is being included properly. In the chrome inspector, I found this:

    stylesheet404

    edit:I replaced the image as I noticed it was hard to read so I zoomed in and took another screenshot.

    I’m not to sure if your styles for the images are included in this file or not, but my first stop would be to make sure that everything is being included. Make sure that when you are enqueing the style (as you should) you use get_template_directory_uri() like so:

    wp_register_style( 'custom-style', get_template_directory_uri() . '/path/to/css' );
wp_enqueue_style( 'custom-style' );

    If this is not the issue, and the styling is being included (and the aforementioned stylesheet is a different one), what I’ve done in the past is wrote a css to style all images I want to be the same width (with the use of a class or what have you). This doesn’t work when WordPress automatically puts in a height attribute directly into the html. In that case, I write a quick jQuery script that searches for all the images on a page and removes the height attribute. 

    $(document).ready(function(){
     $("img").removeAttr('height');
});

    With just a width attribute in the css, the browser should automatically adjust accordingly. However, you would have to include an !important at the end of the css, as inline attributes trump stylesheets.