How do keep different image banner height for desktop and mobile?

[amaya_world]

Hi All,

Would love any help on these issues -

1. I am trying to add a different image banner height for mobile view, and a different banner image height for desktop view. (check images attached, right now, the heads are getting cut for both mobile and desktop)

2. For mobile view, I want to stack the images on top of each other, so that there is one image per scroll. On desktophowever, I want to maintain the two image view. There is a toggle option on theme settings where it says ‘stack images for mobile’ however, when I toggle it, it stacks even the desktop images.

I know that there are couple of different solutions on the shopify community with regards to my question, but none of them have worked for me

[devcoders]

Hello @amaya_world
Welcome to the Shopify Community! Kindly share your store URL and password (if it is password-protected), so that I can review it and provide you with an accurate solution.

[goldi07]

Hello @amaya_world

Thanks for the screenshots and clear explanation, Based on your goals:

1. Different banner heights for desktop and mobile

2. Stack images vertically only on mobile while keeping the split view on desktop

Here’s a custom CSS + Liquid strategy that works regardless of theme toggles:

Step 1: Wrap Each Image Separately
In your section .liquid file (e.g., sections/image-banner.liquid or similar), structure your images like this:

Step 2: Add This CSS (in base.css or via theme editor > custom CSS)

/* Default: Desktop view */
.custom-banner-wrapper {
  display: flex;
  flex-direction: row;
  height: 600px; /* Adjust for desktop banner height */
  overflow: hidden;
}

.custom-banner-item {
  flex: 1;
  height: 100%;
}

.custom-banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile View */
@media screen and (max-width: 749px) {
  .custom-banner-wrapper {
    flex-direction: column;
    height: auto;
  }

  .custom-banner-item {
    height: 500px; /* Mobile banner height per image */
  }

  .custom-banner-item img {
    height: 100%;
    object-fit: cover;
  }
}

Optional: Remove or Override the “stack images for mobile” toggle
If your theme’s toggle is interfering, find and remove the conditional Liquid that checks for settings.stack_images_on_mobile or override it with custom logic.

Summary:
Desktop: 2 images side-by-side, fixed height (e.g., 600px).

Mobile: Stacked images, each with its own scroll height (e.g., 500px).

No cropping of heads if images are properly sized and using object-fit: cover.

hey try this first . if it doesn’t work then give me the store url and i will try to fix this

if you need any help plz let me know

Thank you

[SEOAnt-Jeffery]

Hi @amaya_world

Let me share with you one idea, and you can have a test on your own to see if it works:

First, please capture a screenshot of your website on a mobile device. Second, measure the hero image’s height and width (in pixels) from the screenshot to calculate its aspect ratio. Third, resize your original hero image to a width of 1200 pixels (a standard mobile-friendly size). Lastly, crop the height of the resized image to match the aspect ratio from what you measured in the second step.

This method ensures your image fits seamlessly into the mobile layout, as most devices render websites similarly. By maintaining the correct aspect ratio and standard width, your website image will display properly without distortion or excess space.