How to decrease size between header and product page image

Store Design
, ,
1

Hi,

I need help with decreasing size between my header and product image in product page. It was normal but somehow suddenly the space increase. Here’s an example

IMG_4291.jpeg
IMG_4291.jpeg1206×2622 335 KB

I’ll be grateful for help

2

Hello,
Please share “Store URL”
Thanks!

3

Share URL please

4
5
6 
.swiper-zoom-container>img{
    margin-top: -80px !important;
}

If its helpful please Like and Accept as solution

7

Hey @Alexdontero

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1735829452683.png
Moeed_0-1735829452683.png332×712 194 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

It doesn’t work idk why

9

Thanks it’s working

10

Hello, @Alexdontero

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media (max-width: 768px){
.swiper-slide {
    margin-top: -80px !important;
}
}

Thanks!

11

Hi @Alexdontero

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.swiper-slide.s-media-51168418660686.swiper-slide-active {
    padding-top: 24px !important;
}

Result:

websensepro_0-1735830143217.png
websensepro_0-1735830143217.png339×476 180 KB

websensepro_1-1735830166627.png
websensepro_1-1735830166627.png851×487 372 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!