Home › Forums › WoodMart support forum › Product image on mobile to big

Product image on mobile to big

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 9, 2020 at 10:43 am #232024

    Pierreke
    Participant

    Hello,

    I would like to make my product images on mobile smaller. At the moment when I go to a product on mobile the product images takes in the entire screen. I would like to have this smaller so that without scrolling you already see some information about the product.

    In the theme setting inder product page, images the size is already set to small image.

    October 9, 2020 at 12:14 pm #232037

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I have visited the URL you provided.

    This is the default behavior of the product page display for mobile and there is no option available to change it.

    If we try to change the height using Custom CSS then the images will be cut off and lose quality.

    Best Regards.

    October 17, 2020 at 2:19 pm #234010

    Pierreke
    Participant

    Please help me to change this. This should really be possible by changing the scale of the picture with custom css.

    Please help. this will make the mobile product page much more professional and better for users.

    Thank you.

    October 19, 2020 at 7:41 am #234331

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    As I mentioned in my previous reply, the images will lose quality if you try changing their height using CSS.

    If you still want the CSS then try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-images img {
	height: 200px;
}

    Best Regards.

    October 19, 2020 at 7:52 am #234334

    Pierreke
    Participant

    Thank you however this doesn’t work. See image attached.

    October 19, 2020 at 7:57 am #234338

    Pierreke
    Participant

    Thank you however this doesn’t work. See image attached.

    Attachments:
    You must be logged in to view attached files.
    October 19, 2020 at 10:51 am #234402

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached.

    It seems that you haven’t added the CSS correctly. Please try re-adding the CSS and check back.

    The CSS will only change the height of the images and will affect the quality.

    If the CSS still doesn’t work then provide admin panel login details of the website to check it myself and help you out accordingly.

    Best Regards.

    October 19, 2020 at 10:55 am #234404

    Pierreke
    Participant

    Sorry but you are not correct. I just copied your CSS code. See printscreen attached.
    So please give the right css

    Attachments:
    You must be logged in to view attached files.
    October 19, 2020 at 12:19 pm #234443

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached.

    Please try replacing the previous CSS with the following in the Custom CSS for the Mobile area.

    .product-images img {
	height: 200px !important;
}

    If it still doesn’t work then provide admin panel login details of the website to check it myself and help you out accordingly.

    Best Regards.

    October 19, 2020 at 1:00 pm #234460

    Pierreke
    Participant

    Still the same. And I’m sure that I copied the right CSS.

    Please find the requested infomation here.
    PLease do not make changes I can not revert myself anymore.

    October 19, 2020 at 2:19 pm #234489

    Pierreke
    Participant

    I managed to make the image smaller myself with the folloing code:

    .product-images img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 340px;
    }

    HOWEVER the image preview below it is now very big. Can you give me the CSS code to just completely hide the images below the actual product image just for mobile.

    October 19, 2020 at 2:47 pm #234504

    Pierreke
    Participant

    I managed to do it with the following code;

    .woocommerce-product-gallery .thumbnails {
    display: none;
    }
    .product-images img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 340px;
    }

    October 19, 2020 at 2:57 pm #234506

    Pierreke
    Participant

    The only problem that I have now is that the reduction mentioning is not anymore on the image itself. How can I set this on top of the image in the right corner

    October 19, 2020 at 3:15 pm #234511

    Pierreke
    Participant

    See image for clarification

    Attachments:
    You must be logged in to view attached files.
    October 20, 2020 at 6:33 am #234634

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    We are glad that you managed to do it using CSS.

    I saw the screenshot you attached.

    For the label try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-image-summary .product-images .labels-rounded .product-label {
	position: absolute;
	right: 49px;
}

    You can adjust the value according to your needs.

    Best Regards.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)