Dawn therme-Image bannder and slider display issue

[Alliance]

Hey everyone,

I’ve run into a bit of a snag with the image banner and slider display. Despite following the recommended image size guidelines (1920px x 1080px with a 16:9 aspect ratio), the images aren’t displaying as expected.

Here’s what’s happening:

• The banner images appear stretched or cropped.

• The slider isn’t maintaining the correct aspect ratio, causing some images to look distorted.

• On mobile devices, the issue seems even more pronounced, with images either being too large or not scaling properly.

I’ve double-checked the image dimensions and ensured they’re optimized for web use, but the problem persists. Has anyone else encountered this issue with the Dawn theme?

If so, were you able to find a solution?

Thanks in advance for your help!

URL: https://ba0ven-x1.myshopify.com/ Pass: Delta

[Small_Task_Help]

Hi,

Hope this will work

• Check Image Settings in Theme Editor (Look for an option like “Adapt to first image” or “Image Height” and do the setup)
• Adjust Section Height
• Use proper image dimensions
• Fix Mobile Display Issues
• Edit css if rquired
  CSS code example

.banner__media img, .slideshow__media img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

[Promer-Aila]

Hi @Alliance

Since I can’t directly inspect the site’s code or settings, I’ll offer a general diagnosis and solutions grounded in common Shopify Dawn theme behavior.

The Dawn theme, being Shopify’s free but highly customizable theme, is very reliant on proper configuration in its theme editor and adherence to its structural conventions. Your issue twisted banner images, cut-off banners, and horrible mobile scaling — indicates a misalignment between uploaded pictures, theme settings, and responsive design management.

Here’s what might be happening and how to fix it:

1. Image Size vs. Container Settings
   Even though your images are 1920px x 1080px (16:9 aspect ratio), the Dawn theme’s banner or slider section might be forcing a different aspect ratio or cropping based on its default container settings. The theme often adjusts images to fit predefined section heights or widths, which can override your intended display.
2. CSS or Liquid Overrides
   If the theme’s default styles (via CSS) or Liquid code (Shopify’s templating language) have been customized, they might not respect the 16:9 ratio, leading to stretching or cropping.
3. Responsive Design Misconfiguration
   On mobile, Dawn uses media queries to adjust layouts. If the images aren’t set to scale proportionally or if mobile-specific settings are off, you’ll see exaggerated distortions or oversized images.
4. Optimization Artifacts
   While you’ve optimized the images for web use, excessive compression or incorrect file formats (e.g., PNG with transparency issues) could interfere with rendering, though this is less likely given your description.

Solutions

Here’s how you can troubleshoot and potentially resolve the issue:

1. Check Theme Settings
   • Go to your Shopify admin > Online Store > Themes > Customize, and open the Dawn theme editor.
   • Navigate to the banner or slider section causing the issue.
   • Look for options like “Image fit” (e.g., “Contain” vs. “Cover”). “Cover” crops to fill the container, while “Contain” preserves the aspect ratio but may leave empty space. Test both to see which aligns with your goal.
   • Adjust the section height (e.g., “Small,” “Medium,” “Large,” or custom px values) to better match your 16:9 images.
2. Verify Image Upload
   • Double-check that the images are exactly 1920x1080px when uploaded. Sometimes resizing tools or exports add slight variations.
   • Upload a fresh test image directly through the theme editor (not the Files section) to rule out file reference errors.
3. Mobile-Specific Adjustments
   • In the theme editor, switch to the mobile preview (bottom icon toggle).
   • Check if the banner/slider has mobile-specific settings (e.g., “Mobile layout” or “Image height”). Adjust these to enforce proportional scaling.
   • If no settings exist, you may need to add custom CSS (see below).

[Mustafa_Ali]

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

[Alliance]

Hi,

This is what happened.

[DaisyVo]

Hi @Alliance

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.carousel .list .item .slide-image img {
    object-fit: contain !important;
}

Result

Best

DaisyVo