Extend the main product image slider height on mobile only for Vessel theme

Store Design
,

Topic summary

A user requested help extending the height of the main product image slider on mobile devices only for the Vessel theme, using a specific calculation: calc(100vw * 1025 / 768).

Solutions provided:

  • Add CSS code targeting mobile screens (max-width: 750px or 768px)
  • Use a media query to set --ratio: 768 / 1025 !important on the .product-media class
  • Two implementation methods suggested:
    1. Paste code into the “Custom CSS” setting of the product info section
    2. Add code to the theme’s base.css file via Shopify theme editor

Technical details:

  • The CSS uses a media query to apply changes only on mobile viewports
  • The ratio calculation maintains consistent image proportions relative to viewport width
  • Screenshots were shared showing before/after results

Resolution: The original poster confirmed the solution worked successfully.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Please, can anyone show me how I can extend the height of the main product image slider in product page for mobile only with this height: calc(100vw * 1025 / 768);

My store url is Candyhot Polka Dot Dress – Aluovi

1 Like
2

You may paste this code into “Custom CSS” setting of the product info section:

@media (max-width:750px) {
  .product-media {
    --ratio: 768 / 1025 !important;
  }
}

Screenshot 2025-10-12 at 1.42.48 PM
Screenshot 2025-10-12 at 1.42.48 PM410×859 185 KB
=>
Screenshot 2025-10-12 at 1.42.26 PM
Screenshot 2025-10-12 at 1.42.26 PM410×859 224 KB

1 Like
3

Hi @SageUmeh

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media (max-width:750px) {
  .product-media {
    --ratio: 768 / 1025 !important;
  }
}

image
image313×493 49.3 KB

4

adjusting the height of your product image slider specifically for mobile devices is a smart move, because mobile experience has a direct impact on how long visitors stay on your product pages and how confident they feel in making a purchase.

If you want to set a specific height like calc(100vw * 1025 / 768) only for mobile, you can achieve this easily through a CSS media query. Here’s an example:

@media screen and (max-width: 768px) {
  .product-main-image-slider {
    height: calc(100vw * 1025 / 768) !important;
  }
}

:backhand_index_pointing_right: What this does:

  • The @media rule ensures that the style applies only on screens 768px wide or smaller (i.e., mobile).

  • The calc(100vw * 1025 / 768) dynamically sets the height relative to the viewport width, keeping the image ratio consistent.

  • Adding !important can override default theme styling, though it’s best to use it only if necessary.

If you’re using a platform like Shopify (which “Aluovi” sounds like), you can add this snippet directly in your theme.css or base.css file through the Theme Editor (Online Store → Themes → Edit code). Just make sure the class name .product-main-image-slider matches the one used by your theme — you can confirm this by inspecting the product image element in your browser’s developer tools.

This small adjustment not only makes your visuals more proportionate and immersive on mobile, but also subtly improves perceived quality and conversion potential — because users instantly feel they’re viewing a product displayed with care and precision.

But here’s the real question: *If optimizing your mobile visuals can so easily elevate trust and engagement, what other overlooked design details might be quietly holding back your store’s full conversion potential?*adjusting the height of your product image slider specifically for mobile devices is a smart move, because mobile experience has a direct impact on how long visitors stay on your product pages and how confident they feel in making a purchase.

If you want to set a specific height like calc(100vw * 1025 / 768) only for mobile, you can achieve this easily through a CSS media query. Here’s an example:

@media screen and (max-width: 768px) {
  .product-main-image-slider {
    height: calc(100vw * 1025 / 768) !important;
  }
}

:backhand_index_pointing_right: What this does:

  • The @media rule ensures that the style applies only on screens 768px wide or smaller (i.e., mobile).

  • The calc(100vw * 1025 / 768) dynamically sets the height relative to the viewport width, keeping the image ratio consistent.

  • Adding !important can override default theme styling, though it’s best to use it only if necessary.

If you’re using a platform like Shopify (which “Aluovi” sounds like), you can add this snippet directly in your theme.css or base.css file through the Theme Editor (Online Store → Themes → Edit code). Just make sure the class name .product-main-image-slider matches the one used by your theme — you can confirm this by inspecting the product image element in your browser’s developer tools.

This small adjustment not only makes your visuals more proportionate and immersive on mobile, but also subtly improves perceived quality and conversion potential — because users instantly feel they’re viewing a product displayed with care and precision.

Let me ask you this:

If optimizing your mobile visuals can so easily elevate trust and engagement, what other overlooked design details might be quietly holding back your store’s full conversion potential?

5

Thanks a lot, It worked

1 Like