WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Images on product page are showing up different sizes! (6 posts)

  1. Sophiemartin95
    Member
    Posted 1 year ago #

    This is stressing me out so much!

    When i upload an image it comes out to be huge on the product page and I've tried altering all the images sizes within the css, woocommerce settings, and my theme setting but nothing it helping.

    It didn't use to be like this.

    Some one me help PLEASE!!!

    http://rarephenomenon.com/product/bungle-bangle/

    this is an example!

    http://wordpress.org/plugins/woocommerce/

  2. Roy Ho
    Member
    Posted 1 year ago #

    That is because you have this in your CSS:

    div.product div.images img { width:auto !important; }

    That tells your site to fill the space up automatically to the size of the actual image that is being pulled. So if your image is 480px wide, it will be that wide.

    So either you change that size setting in your WC settings, or change that CSS to:

    div.product div.images img { max-width:100%; }
  3. Sophiemartin95
    Member
    Posted 1 year ago #

    Ok thank you, but which CSS? Style, custom or woocommerce?

  4. Sophiemartin95
    Member
    Posted 1 year ago #

    ok i see it but im not understanding what to change it to.

    div.product div.images{float:left;width:47%;margin-bottom:10px;}div.product div.images img{display:block;/*width:auto;*/height:auto;margin: auto;width: auto !important;}
    div.product div.images div.thumbnails{padding-top:10px;overflow:hidden;zoom:1;}
    div.product div.images div.thumbnails a{float:left;width:85px !important;margin: 0 2px 17px 11px !important;}
    div.product div.images div.thumbnails a img{width:auto;height:auto;}
    div.product div.images div.thumbnails a.last{margin-right:0;}
    div.product div.images div.thumbnails a.first{clear:both;}

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That code appears on the WooCommerce stylesheet line 15 - a browser tool like Firebug should help you locate it.

  6. Sophiemartin95
    Member
    Posted 1 year ago #

    Omg Thank You!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic