Product Images Carousel - Need a few edits

[Ryanp]

I would like to do several things to my product page product carousel images to give them a more UI/ux feel and modern..

1. Space Images a little

2. Add light border

3. Add shadow

4. Round corners by 5px

5. Make aspect ratio portrait style or landscape

If anybody can help me out that would be awesome!  Here's the link to one of my products - https://devildaves.com/products/blaster-liquid-bloody-mary-seasoning

 

 

 

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

If you want remove breadcrumb you can try code:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
@media only screen and (max-width: 767px) {
    // space image and title apply for mobile
   .product .thumbnail-slider{
      margin-bottom: 16px !important;
   }
}

// code create space for shadow
.product .thumbnail-list{
   padding: 20px !important;
   
}
// code create border-radius and shadow
.product .thumbnail{
  border-radius: 5px !important; 
  box-shadow: -1px 7px 29px 2px rgba(0,0,0,0.04) !important;
  -webkit-box-shadow: -1px 7px 29px 2px rgba(0,0,0,0.04) !important;
  -moz-box-shadow: -1px 7px 29px 2px rgba(0,0,0,0.04) !important;
}

//code handle button active you can change color border
.product .thumbnail[aria-current]:focus, .thumbnail.focused {
    outline: 0 !important;
    box-shadow: none !important;
    border: 1px solid #333333 !important;
}

</style>

And "Make aspect ratio portrait style or landscape" I dont understand it, you can explain more , I will suport you.
Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[Ryanp]

Thank you - it worked good..  Can you also help me with these two things as well. 

1. Change aspect ratio of thumbnails to Portrait (3:4) from square shape. 

2. Increase size of the thumbnails both mobile and desktop. they are too small. 

Here is the code you gave me and I made some tweaks. 

[[  <style>
@media only screen and (max-width: 767px) {
    /*space image and title apply for mobile*/
   .product .thumbnail-slider{
      margin-bottom: 16px !important;
   }
}

/*code create space for shadow*/
.product .thumbnail-list{
   padding: 20px !important;
   
}
/*code create border-radius and shadow*/
.product .thumbnail{
  border-radius: 5px !important;
  box-shadow: 3px 3px 2px 1px rgba(178, 178, 178, .8) !important;
  -webkit-box-shadow: 3px 3px 2px 1px rgba(178, 178, 178, .8) !important;
  -moz-box-shadow: 3px 3px 2px 1px rgba(178, 178, 178, .8) !important;
}

/*code handle button active you can change color border*/
.product .thumbnail[aria-current]:focus, .thumbnail.focused {
    outline: 0 !important;
    box-shadow: none !important;
    border: 2px solid #9f9f9f !important;
}

</style> ]]

---