Support Center Visit Demo License manager Buy @ envato

Woocommerce product images are positioned to the left

epertortaepertorta
in Files & images
Dear Support,

Please take a look at here:

My problem is that no matter how I change the main product image, the image is always positioned to the left, with a larger space to the right. 

I have tried to modify the default image sizes of the media library, that did not help.

Thank you for your support.

Best regards,
Andras

Comments

  • AlbertAlbert
    Hi Andras,

    so what you want to do? Center images inside box or what? If you want to center then, then you can use below css: 
    .single-product .product_wrapper .image_frame a, .single-product .product_wrapper .wp-caption a { text-align: center; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • epertortaepertorta
    Dear Support, 

    Centering the image definietly helps. But what I would like to achieve is to have the image fill out the borders.

    For some reason the image is cutted on both sides.

    May I have one more questions?

    At the "Évek száma" sign, the accordition table (További információk) behaves strange for me. If I move the cursor over the Évek száma sign, the number become white, and can not be seen.

    I have tried to correct it in css, but I am afraid it is just too complex for me: I don't understand what I should modify to have the cell behave like the upper cell (Számítógépek száma). 

    If you could help with this, it would be great. 

    Thank you very much!

    Best regards,
    Andras


  • AlbertAlbert
    So if you want larger images inside boxes, you should use different sizes of images. Definitely larger one and images that are wider than higher.

    As we see your table works fine. We don`t see any problem on hover. Text inside table is white but whole background is red color and all is clear and visible
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • epertortaepertorta
    Dear Support,

    I am using a large image, the original can be seen here:

    The sides are cut, and the picture looks silly in the box:

    About the table error:
    Original table:

    Table cell highlighted well when the cursor is above the numbers:

    Table cell goes wrong when cursor is over the Text:

    The original ones can be seen live here:

    I hope you can see the errors now. 

    Thank you for the support!

    Best regards,
    Andras

  • AlbertAlbert
    As we see in the code, you use 300x300 image size (this is the size of images you defined in woocommerce plugin). But if you will change for example to 500x300 then all will be fine because we checked it in html. So please increase images width and this should help you a lot!

    About 2nd thing, we see now, what you mean. Please try to use below css for that (we tested it on your site with Firebug and looks like it works): 
    .single-product .shop_attributes table tr.alt:hover { background-color: #B00113; }
    .single-product .shop_attributes table tr.alt th { background-color: #F9F9F9 !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • epertortaepertorta
    Dear Support,

    The thumbnails thing was solved, thank you very much!

    The second thing - white column text - was unfortunatly not solved. 

    I have copied this css:
    .single-product .shop_attributes table tr.alt:hover { background-color: #B00113; }
    .single-product .shop_attributes table tr.alt th { background-color: #F9F9F9 !important; }    

    into the costume css, but it did not help. 

    Any idea why?

    Best regards,
    Andras
  • AlbertAlbert
    Ok, so please try below css instead: 
    table tr:hover td { background: #b00113 !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • epertortaepertorta
    Thank you, it works perfectly!
Sign In or Register to comment.