Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • September 17, 2018 at 12:47 pm #1010711
    WebManager11

    Hi.
    I need to create border around the product image in the product page.
    At the moment, this code create border bigger than the image size.

    .woocommerce .product img {
    border: 1px solid black;
    }

    How can I create border fit to the image size and align border and image to the center ?

    Thanks for your support.

    Kind regards.

    September 17, 2018 at 2:39 pm #1010776
    WebManager11

    Also please check this sample image to understand our problem better.

    https://cdn1.imggmi.com/uploads/2018/9/17/6c939207cf6edd304056bd998ae11049-full.png

    Thanks so much for your help.

    September 17, 2018 at 5:42 pm #1010860
    Victoria

    Hi WebManager11,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    September 17, 2018 at 6:29 pm #1010898
    WebManager11
    This reply has been marked as private.
    September 17, 2018 at 6:41 pm #1010914
    Victoria

    Hi WebManager11,

    Please remove the code you added before.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .product div.images img {
    border: 1px #000 solid;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 17, 2018 at 6:58 pm #1010922
    WebManager11

    Can you check the link again ?
    It changed the border but it have double line borders instead of single line border.

    September 17, 2018 at 7:00 pm #1010924
    WebManager11

    Also It seems the image size is greater than the actual image size 300×300. How can I show the original image size 300 x 300 in the product page ?

    You can click on the image and you will see that image size is actually smaller.

    • This reply was modified 6 years, 3 months ago by WebManager11.
    September 17, 2018 at 11:17 pm #1011030
    WebManager11

    Hello
    Can you please help ?

    September 18, 2018 at 5:58 am #1011080
    Rikard

    Hi,

    Thanks for the update, let’s stick to one problem at a time. Please try this for the border:

    .template-shop .single-product-main-image .images a {
    border: none;
}

    Best regards,
    Rikard

    September 18, 2018 at 5:29 pm #1011410
    WebManager11

    This code remove border but the image size is too big and just blury.

    .template-shop .single-product-main-image .images a {
    border: none;
    }

    September 18, 2018 at 5:30 pm #1011411
    WebManager11

    I have put it back this code because this code is slightly better than your code. But still the image is blury because image size is bigger than the original size.

    #top .product div.images img {
    border: 1px #000 solid;
    }

    • This reply was modified 6 years, 3 months ago by WebManager11.
    September 18, 2018 at 5:33 pm #1011417
    WebManager11

    If I put this code then the image size is correct. But border is too wider than the image size. Check this sample image.

    https://cdn1.imggmi.com/uploads/2018/9/17/6c939207cf6edd304056bd998ae11049-full.png

    I need to know what is the right css code for my problem.

    #top .product div.images img {
    width: 300px !important;
    max-width: 300px !important;
    margin-left: auto;
    margin-right: auto;
    }

    September 19, 2018 at 6:21 pm #1011960
    WebManager11

    Not sure if one can sugget some alternative code ??

    Or do you want me to create new post ?

    September 20, 2018 at 1:04 pm #1012282
    Ismael

    Hi,

    Have you tried to limit the size of the main image container?

    .single-product-main-image {
    width: 23%;
}

    Default width value is 33%.

    Best regards,
    Ismael

    September 20, 2018 at 7:06 pm #1012435
    WebManager11

    Good solution from unexpected angle. That really worked.
    Thanks so much.

    September 20, 2018 at 10:50 pm #1012501
    Jordan Shannon

    Hi,

    I’m glad you got that resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Woocommerce Product Page Border Creation + Aligning image and border to center’ is closed to new replies.