Adjusting Product Image Layout

[samueljoonjung]

How do I get the product image to take up the whole space. Right now, there is a space above and below the product photo. I want to make it so that it is not a square but a rectangle like the "HOURS" website so that it could fill the space above, where it meets the line of the header. And if possible, to make the slide arrows similar to HOURS as well where it's in the product photo and to the sides. My url is www.whoglobal.shop

[CodingFifty]

Hi @samueljoonjung,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (max-width: 749px) {
    .grid--peek.slider--mobile {
        margin: 0;
        width: 108% !important;
    }
    product-info#MainProduct-template--24123061305640__main {
    padding-top: 0px !important;
}

.product__media-item {
    padding: 0px !important;
    margin: 0px !important;
}
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
       overflow-x: hidden !important;
    }
    .slider.slider--mobile {
        scroll-padding-left: 0px !important;
    }
}

[samueljoonjung]

This is what I got from that. It's definitely closer but it's still not long vertically like the HOURS product page.

[CodingFifty]

Try this code.

@media screen and (max-width: 749px) {
    .grid--peek.slider--mobile {
        margin: 0;
        width: 108% !important;
        height: 68vh !important;
    }
    product-info#MainProduct-template--24123061305640__main {
    padding-top: 0px !important;
}

.product__media-item {
    padding: 0px !important;
    margin: 0px !important;
}
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
       overflow-x: hidden !important;
    }
    .slider.slider--mobile {
        scroll-padding-left: 0px !important;
    }
}

[samueljoonjung]

Thanks so much!

[samueljoonjung]

Hi, I took a look back at my mobile website and though that works for the hoodie, it doesn't exactly work for the shirt because there is a bit of space above between the header and picture. Is there anyway to make all products to be like the hoodie so that when I also add a new product as well, it will show like the hoodie?