How can I remove whitespace from my product page?

Store Design
1

Hi ! there’s whitespace between the header and the product image is there any way i could fix it by removing it and having clean look like the second image thanks !

InShot_20230528_170753342.jpg
InShot_20230528_170753342.jpg1377×3072 478 KB

InShot_20230528_172144154.jpg
InShot_20230528_172144154.jpg1303×1920 350 KB

(something like this)

store link- https://denisclothing.com/products/mens-long-sleeve-shirt-classic-casual?variant=45154314453311

pw - dc33

2

Hi @A13

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media screen and (max-width: 749px){
.grid--peek.slider--mobile {
    width: calc(100% + 4rem) !important;
}
.grid--peek.slider .grid__item:first-of-type {
    margin-left: 0 !important;
}
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

3

Hello @A13

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px) {
.slider.slider--mobile .slider__slide {
  padding-top: 0 !important;
}
.grid--peek.slider .grid__item:first-of-type {
    margin-left: 0 !important;
}
}
4

Hi @A13

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 749px){

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

.slider.slider–mobile {scroll-padding-left: 0 !important;}

}

Regards,

San