How I remove padding from product page in Dawn thema

Store Design
1

I can remove padding from top with custumize. But i can not remove betwen product image and product variants image. Please help. I can not find assets/style.scc and i also want convert my color button to image swatch without any app. Is this possible?

Untitled.png
Untitled.png1254×612 152 KB

2

Hi @zamanhasanov96 ,

  • With padding: I checked and it shows fine:

Screenshot.png
Screenshot.png300×444 124 KB

Hope it helps!

3

Go to theme code editor to edit the code of your theme :

Open CSS file section-main-product.css

Around Line 470 find the code block :

@media screen and (max-width: 749px) {
  .product__media-list {
    margin-left: -2.5rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
    width: calc(100% + 4rem);
  }

  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .slider.product__media-list::-webkit-scrollbar {
    height: 0.2rem;
    width: 0.2rem;
  }

  .product__media-list::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground));
  }

  .product__media-list::-webkit-scrollbar-track {
    background-color: rgba(var(--color-foreground), 0.2);
  }

  .product__media-list .product__media-item {
    width: calc(100% - 3rem);
  }
}

Within the nest of the media query, you will find as seen above the code block :

.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

Add into this code block something like this, that suits the style you are going for.

.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
  }

// Or Optionally below : //

  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin: -1.5rem;
  }

Note that we made this change within the nested media query for screen widths smaller then 749px. (. @media screen and (max-width: 749px) {. )

This will only apply this CSS change when the screen width is this size. You may need to include this in other nested media queries if you want the effect to take place on desktop / tablet versions etc.

Hope that helps!

KG

4

Already ı resolve prablem thans

1 Like