[Dawn Theme] How border around ONLY main Product Picture on Product Page?

[namestolen]

So I was able to get a border around my Product Page picture like I wanted...but it also put a border around each of the smaller preview images below it as well.  I only want a border on the larger main product picture.  Here's the code I used in theme.liquid:

<style>
      /* Add Border Around Main Product Image */
.product__media-wrapper img {
    border: 2px solid #ccba78 !important; 
      padding: 10px !important;
    background: black !important;
    border-radius: 10px !important; /* Rounded Corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Optional Shadow */
}

    </style>

and a picture for reference:

Thanks in advance!

[rajweb]

Hey @namestolen ,

To apply a border only to the main product image while keeping the smaller preview images unaffected, you need to be more specific in your CSS selector. The code you provided applies the border to all images within the .product__media-wrapper.Typically, the main product image has a specific class, while the thumbnail images have different classes.

Here's an updated version of your code that should work:

<style>
  /* Add Border Around Main Product Image */
  .product__media-wrapper .product__media--main img {
      border: 2px solid #ccba78 !important; 
      padding: 10px !important;
      background: black !important;
      border-radius: 10px !important; /* Rounded Corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Optional Shadow */
  }

  /* Remove Border from Thumbnail Images */
  .product__media-wrapper .product__media--thumb img {
      border: none !important;
      padding: 0 !important;
      background: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
  }
</style>

if the class names for the main and thumbnail images are different in your theme, you may need to inspect the elements using the browser's developer tools to find the correct classes. Adjust the selectors accordingly.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[Dan-From-Ryviu · Accepted solution]

Please update your code to this 

.product__media-wrapper .product__media-list {
    border: 2px solid #ccba78 !important;
    padding: 10px !important;
    background: black !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

[namestolen]

Thank you !