Dawn 15.4.0 – Gap on Left Side (Desktop) + First Mobile Image Full Width but Next Images Shifted

[crepscity]

Hi everyone,

I’m using Dawn 15.4.0 and I’m running into two layout issues:

1. Desktop Layout Issue
There is a gap on the left side of my homepage/sections on desktop, and I want that space completely removed so the content aligns fully to the left with no empty margin or padding. I can’t figure out what is causing the gap.

2. Mobile Image Issue
On mobile, the first image in my image banner/section displays full width, which is correct.
But the next images show a visible divider/border, which means those images are slightly center-aligned instead of full width. Only the first image is full width — the rest shift inward.

Im currently using this css: .product__media-list {
gap: 0 !important;
}
@media (max-width: 749px) {
.product__media-item {
width: 100% !important;
}
}
.product__media-item {
margin: 0 !important;
padding: 0 !important;
}

Does anyone know how I can:

• Remove the left-side gap on desktop

• Make all images on mobile display full width, just like the first one

URL: https://orm6wtygku9mqawm-64748617967.shopifypreview.com

Any CSS or theme file guidance would be greatly appreciated!

Thanks in advance.

DESKTOP:

MOBILE:

[crepscity]

Any solution for this?

[Michross]

1. Remove the Left-Side Gap on Desktop

Dawn wraps nearly all homepage sections inside .page-width, which includes padding.
You can override this globally with:

/* Remove left and right spacing on all sections */
.page-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

If only certain sections should be full-width, use this instead:

/* Only make banner + featured sections full-width */
.banner,
.section-template--index .section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

This removes the forced “gap” you’re seeing on desktop.

2. Make ALL Mobile Images 100% Width

Dawn applies additional constraints on .banner__media and .media elements, making only the first image responsive full-width.

Add this to fix all of them:

@media (max-width: 749px) {

  /* Force all images in banner/sections to be true full-width */
  .banner__media,
  .banner__media img,
  .media,
  .media img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Remove the subtle automatic horizontal padding */
  .section-template--index .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

This removes the inner border/divider and makes the second, third, etc., images align like the first one.

[crepscity]

Hi! I hope you’re doing well.
I tested the CSS, but it ended up affecting the whole site, including the header, instead of just the product page. The desktop spacing did improve, but it was applied globally, which I don’t want.

On mobile, nothing changed the gap/divider under the second and third product images is still there.

Could you please update the code so that:

1. Desktop:
   The left/right gap is removed only on the product page, without affecting other pages.

2. Mobile:
   The small gap/divider line under the second and third product images is removed.

URL: Union La x Air Jordan 4 Retro 'Off Noir' – Creps City