Return to previous page

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

This topic has 12 replies, 4 voices, and was last updated 6 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.
    #410622 Copied Theme version: 9.3.17
    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

    #410625 Copied
    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.
    #410629 Copied
    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

    #410634 Copied
    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.
    #410635 Copied
    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

    #410674 Copied
    Avatar: Ombi
    Ombi
    Participant
    August 19, 2024 at 14:36

    Okeee

    Please contact administrator
    for this information.
    #410730 Copied
    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

    #410787 Copied
    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.
    #410797 Copied
    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

    #410848 Copied
    Avatar: Ombi
    Ombi
    Participant
    August 20, 2024 at 15:19

    Exactly what I want, thanks for the help.

    #410886 Copied
    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

    #410887 Copied

  • Tagged: , , , , ,

  • 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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Electronic Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store 03 – WordPress WooCommerce Theme
lazy-placeholder
Watches Store – WooCommerce Theme
lazy-placeholder
Babyland 01 – WordPress WooCommerce Theme
lazy-placeholder
Grocery Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Lingerie Store – WordPress WooCommerce Theme
lazy-placeholder
Finances – WordPress WooCommerce Theme

See All Templates

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