WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Mystile: Images resized and enlarged. how can I fix it? (15 posts)

  1. graccurris
    Member
    Posted 1 year ago #

    Hi, I am creating the following website with the Mystile template.
    The website is: http://bit.ly/Rlncqi

    The image uploaded is 150x71px.
    In: http://bit.ly/UxCF7g and specially in http://bit.ly/RVZnXv the images are much bigger than expected, as they have been resized. Anybody can help?

    As the website is in maintenance mode, you can log in with these details:
    Username: testblog
    Password: testblog

    Thank you!

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

  2. samueljeden
    Member
    Posted 1 year ago #

    Hi Graccurris,

    For your single product try adding this custom css. <- this assumes that you will be uploading the correct size image as you want and that images will not be dynamic in value just a fixed width and height.

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

    this change it to correct size for me.

    and for your product list here

    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;
    }
  3. graccurris
    Member
    Posted 1 year ago #

    Thank you for the answer.

    I've added those codes at the end of the file "layout.css", but it doesn't work for me. The images have the same sizes when I refresh (having emptied the cache) the page.

    Any other hint?

    Thanks!

  4. samueljeden
    Member
    Posted 1 year ago #

    Ive tested the code on my install and it works fine. <- in Chrome & Firefox.

    It needs to be added to your custom.css file and not your layout.css file because this is called first and will be over-written by your grey.css which is where they are being redefined.

    we need to make this in the last outputted css file which for mystile is custom.css.

    OR you can add it directly in to the theme options box where it says "Quickly add some CSS to your theme by adding it to this block."

    ^ Go to Theme Options -> General Settings -> Display Options...

    add it in there :)

    Thanks

  5. graccurris
    Member
    Posted 1 year ago #

    Ah, so I was doing it in the wrong css file. Sorry, I am not used to Woo themes, and this is my first one.

    Thank you very much, it works perfectly now!!!

  6. samueljeden
    Member
    Posted 1 year ago #

    Not a problem :).

    My pleasure!

  7. graccurris
    Member
    Posted 1 year ago #

    Hi again,

    I thought this issue was resolved but it seems it is not, provided in single products the size now is reduced: http://bit.ly/W98QGJ

    Additionally, when clicked onto the image, the image appears twice (once as the lightbox and another as the "prettyPhoto". Is there any option where I can remove one of them so it just happens once?

    Thanks again for the help!

  8. graccurris
    Member
    Posted 1 year ago #

    The issue is only this one:

    I thought this issue was resolved but it seems it is not, provided in single products the size now is reduced: http://bit.ly/W98QGJ

    I already found the option for the lightbox :)

    Thanks for any help!

  9. samueljeden
    Member
    Posted 1 year ago #

    It looks like you have your thumbnail options set incorrectly in the woocommerce admin..

    you have the product thumbnail set to 150x71 but your original image is 202x202.

    You must have them set to force cut. You can change your settings in admin.

    http://cl.ly/image/3K3i2a1P2W47

  10. graccurris
    Member
    Posted 1 year ago #

    Thanks so much! This is fixed!

  11. emiljonzon
    Member
    Posted 1 year ago #

    Thanks Samuel! I had the same problem, but your solution worked fine for me.

    Now there's only one thing left: the thumbnails in the product-gallery (look below the big image http://www.duger.se/v4/butik/kuddfodral-2/). I guess you need to write some code after '.images .thumbnails', but I don't understand what to write.

    Can you please help me with this?

    Thanks in advance!
    //Emil

  12. mr. doodle
    Member
    Posted 1 year ago #

    Hey Emil,

    I clicked on your link above and noticed you found out how to fix the thumbnail problem you asked about... I'm curious as to how you did it? Any help would be appreciated!

    - Matt

  13. daltx7
    Member
    Posted 7 months ago #

    Samuel: I am catching up on this thread as it spoke to me directly. I am using the solution you suggested to Graccurris for the featured image at the website http://www.flowersinmemory.com , but would like the image to be approximately twice what it is now (assuming what you see has not been retrofitted through my designer overnight but about the size of my main image) What would the code be to get it twice your previous? Thanks

  14. samueljeden
    Member
    Posted 7 months ago #

    Daitx - the code above assumes that you have uploaded the full size image, what size images are you trying to achieve?

  15. daltx7
    Member
    Posted 7 months ago #

    Well, did some research and have the image size that I like as for now, with the code as:

    .images img {
         width: 260px;
         height: 260px;
    }

    That said, I don't know what I am doing, but it worked for me. They seem like large sizes, but look fine without being too grainy. Any suggestions would be appreciated. I am sure your code is proper, but the image size I have there is the one I need. I am now trying to downsize banner and enlarge title. Thanks for reply.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic