adding padding to product info without adding padding to product image on mobile site

Site URL: https://www.lleky.com/apparel/p/3ymppisnpe5idhs7a03ft5qc48wyck-p8be2

I used a code to make the product images full bleed, but it applied to the product info as well. Is there a code to leave some padding for the product info and titles?

I am currently using this code

/* product images full */
.tweak-products-width-full .products.collection-content-wrapper {
    padding-left: 0;
  padding-right: 0;
    padding-bottom: 0;
}
.tweak-product-basic-item-width-inset .ProductItem {
    padding-left: 0;
    margin-left: 0;
    max-width: 100%;
}
nav.ProductItem-nav {
    display: none;
}
 

Thanks!

Don't remove your code. Add this code under

section.product-details.ProductItem-details {
    padding-left: 20px;
    padding-right: 20px;
}

Is there a way to make product images full bleed in the "wrap" design? + eliminate the breadcrumbs?

On 5/10/2022 at 1:27 PM, lleky said:

Is there a way to make product images full bleed in the "wrap" design? + eliminate the breadcrumbs?

You mean add padding around product info text on mobile? Use this CSS

/* Mobile product info padding */
@media screen and (max-width:767px) {
.product-details.pdp-details {
    padding-left: 2vw;
    padding-right: 2vw;
}}

Yes that helped for the mobile! thank you! what code do I need to use for non mobile? Also from a previous code we discussed, the product images are full bleed on the top and bottom, but not full bleed in between or left or right. do you know of a solution? 

https://www.lleky.com/apparel/p/3ymppisnpe5idhs7a03ft5qc48wyck-p8be2-wy33l-drn6d

On 5/14/2022 at 5:46 AM, lleky said:

Yes that helped for the mobile! thank you! what code do I need to use for non mobile? Also from a previous code we discussed, the product images are full bleed on the top and bottom, but not full bleed in between or left or right. do you know of a solution? 

https://www.lleky.com/apparel/p/3ymppisnpe5idhs7a03ft5qc48wyck-p8be2-wy33l-drn6d

Use this code

@media screen and (min-width:768px) {
/* Image */
.pdp-gallery-images {
    padding-left: 0 !important;
}
html, body {overflow-x:hidden;}
/* product description */
.product-details.pdp-details {
    padding-top: 4vw;
    padding-left: 5vw;
}
}