Extend product pictures on page

Hi,

I would like my product pictures on the product page for all of my products to be bigger and to stretch all the way to the edge at the top so it goes under the logo and main navigations, and bottom (not all the way down to footer only whats in the field of view when you first load in to the page) and to the left side. 

I attached a picture of the page from my site, as well as a picture of how i would like to have it exactly.

This is my webiste:

Teodice.com

Password: Axell123

Thanks so much in advance!

You can use this code to Website Tools > Custom CSS

@media screen and (min-width:768px) {
body[class*="type-products"].view-item {
& {
overflow-x: hidden;
}
section.product-details.ProductItem-details {
    padding-top: 8vw !important;
}
.products.collection-content-wrapper {
    padding-top: 0px !important;
    padding-right: 0px !important;
}
#page>article>section:first-child {
    padding-top: 0px !important;
}
nav.ProductItem-nav {
    display: none !important;
}
header#header, .header-background-solid {
    background-color: transparent !important;
}}}

On 9/2/2024 at 10:05 AM, tuanphan said:

You can use this code to Website Tools > Custom CSS

@media screen and (min-width:768px) {
body[class*="type-products"].view-item {
& {
overflow-x: hidden;
}
section.product-details.ProductItem-details {
    padding-top: 8vw !important;
}
.products.collection-content-wrapper {
    padding-top: 0px !important;
    padding-right: 0px !important;
}
#page>article>section:first-child {
    padding-top: 0px !important;
}
nav.ProductItem-nav {
    display: none !important;
}
header#header, .header-background-solid {
    background-color: transparent !important;
}}}

 

Thank you for the help! 

How do i make it so the picture goes to the edge to the left as well? I want it to cover 50% of the screen. Also so that the white in between the pictures below goes away so the top and bottom of the pictures are connected, if you understand.  

I'll attach a picture.

You can use this new code

@media screen and (min-width:768px) {
body[class*="type-products"].view-item {
section#pdp {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
& {
overflow-x: hidden;
}
section.product-details.ProductItem-details {
    padding-top: 8vw !important;
}
.products.collection-content-wrapper {
    padding-top: 0px !important;
    padding-right: 0px !important;
}
#page>article>section:first-child {
    padding-top: 0px !important;
}
nav.ProductItem-nav {
    display: none !important;
}
header#header, .header-background-solid {
    background-color: transparent !important;
}}}

With space between images, can you share link to a product with multiple images?

11 hours ago, tuanphan said:

You can use this new code

@media screen and (min-width:768px) {
body[class*="type-products"].view-item {
section#pdp {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
& {
overflow-x: hidden;
}
section.product-details.ProductItem-details {
    padding-top: 8vw !important;
}
.products.collection-content-wrapper {
    padding-top: 0px !important;
    padding-right: 0px !important;
}
#page>article>section:first-child {
    padding-top: 0px !important;
}
nav.ProductItem-nav {
    display: none !important;
}
header#header, .header-background-solid {
    background-color: transparent !important;
}}}

With space between images, can you share link to a product with multiple images?

Of course, here is a link. 

https://www.teodice.com/store/p/teodice-hat-mbz9z-2lxyx-mnhhr