I want to remove this space on my product page on mobile (between the header and the product pics)

[imazele]

Hello I want to remove this little space on mobile ! I want my picture to be stick to the header ! The red line is what I want to remove (you can see it on the picture down below)

Here is my product page :https://www.five-pocket.com/products/pro-club-heavy-weight-t-shirt-white

It is already done on desktop but not on mobile ! Thanks a lot !

[Moeed]

Hey @imazele

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:

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

Best Regards,
Moeed

[imazele]

Thanks but you remove to much space ! it need to be equal !

Like I want to keep what I put in green ! can you please look at this picture and correct this ?

[websensepro]

Hey @imazele

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

.header{
    padding-top: 0!important;
    padding-bottom: 0!important ;
}
.slider.slider--mobile .slider__slide {
    padding-top: 0!important;
}

[imazele]

Hello It don’t work

[websensepro]

give me website access

[PageFly-Oliver]

Hi @imazele ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

@media(max-width:767px){
#MainContent{transform:translateY(-15px)}
}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly