Jump to content

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

Recommended Posts

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!

IMG_2557.PNG

IMG_2559 2.PNG

Edited by lleky
Link to comment
  • lleky changed the title to adding padding to product info without adding padding to product image on mobile site
  • Replies 5
  • Views 581
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.