How do I make the gallery image in a single post appear smaller?

This topic has 12 replies, 4 voices, and was last updated 3 months ago ago by Andrew Mitchell

  • Avatar: Ombi
    Ombi
    Participant
    August 18, 2024 at 13:23

    Hi, I want to make this product gallery image smaller, just like this https://www.crateandbarrel.com/kitchenaid-semi-automatic-espresso-machine-in-porcelain-white/s279443

    Files is visible for topic creator and
    support staff only.
    11 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 18, 2024 at 13:46

    Hello Ombi,

    Thank you for reaching out to us with your request.

    We can’t check the site you provided – https://prnt.sc/Prf6sc3COfEC Please provide some screenshots of the desired result.

    Additionally, provide temporary wp-admin access to your site. We need to check your settings.

    To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

    Best Regards,
    8Theme’s Team

    Avatar: Ombi
    Ombi
    Participant
    August 18, 2024 at 15:37

    The pictures I marked, they seem smaller. whereas I didn’t find any setting to set the size of that image in the theme. I think the default theme is too big

    Files is visible for topic creator and
    support staff only.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 18, 2024 at 16:12

    Hello Ombi,

    We appreciate your prompt response.

    Please try to add this code in the settings of the element https://prnt.sc/i0z2eLYJOase (Single Product Builder via Elementor) –

    selector .swiper-vertical-images .vertical-thumbnails-wrapper li, 
    selector .swiper-vertical-images .vertical-thumbnails-wrapper {
        width: 80px !important;
    }

    If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Best Regards,
    8Theme’s Team

    Avatar: Ombi
    Ombi
    Participant
    August 18, 2024 at 16:18

    this works, but leaves quite wide spaces. and on mobile it seems the size remains unchanged.

    Files is visible for topic creator and
    support staff only.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 19, 2024 at 07:31

    Hello Ombi,

    Could you please provide temporary wp-admin access?

    To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

    Best Regards,
    8Theme’s Team

    Avatar: Ombi
    Ombi
    Participant
    August 19, 2024 at 14:36

    Okeee

    Please contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 20, 2024 at 07:29

    Hello @Ombi

    Please, try to use the next CSS code snippet:

    selector .swiper-vertical-images .vertical-thumbnails-wrapper {
        width: 80px !important;
        margin: 0 auto;
    }

    This way you will align the images to the center (https://prnt.sc/uLgQPkCV-R3e). If you are asking for something else, please describe the results you are expecting to have.

    Kind regards, Jack Richardson
    The 8theme’s team

    Avatar: Ombi
    Ombi
    Participant
    August 20, 2024 at 08:22

    The above method is completely successful, there is 1 more final question.
    I want the main image to enlarge like what you can see in the picture.

    Files is visible for topic creator and
    support staff only.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 20, 2024 at 12:47

    Dear @Ombi,

    Should you wish to achieve the result as depicted in the following screenshot: https://prnt.sc/2fF8z5k6bF2z, we recommend utilizing the custom CSS provided below, rather than the previously suggested code:

    @media only screen and (min-width: 650px) {
        selector .swiper-vertical-images .vertical-thumbnails-wrapper {
            width: 80px !important;
            margin: 0 auto;
        }
        selector .swiper-vertical-images .swiper-control-top {
            width: calc(100% - 80px);
        }
    }

    Best regards,
    Jack Richardson
    The 8Theme Team

    Avatar: Ombi
    Ombi
    Participant
    August 20, 2024 at 15:19

    Exactly what I want, thanks for the help.

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 20, 2024 at 15:19

    Dear Ombi,

    We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

    Click here to rate now: https://themeforest.net/downloads

    Thank you sincerely for your ongoing support!

    Best Regards,
    The 8Theme Team

  • Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘How do I make the gallery image in a single post appear smaller?’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.