How can I add persistent borders to top images in Dawn theme?

[Yumhaven]

Hello there! I am trying to add a border to the top images on my site that would always show even if the window is resized.

I added this to my theme liquid but it only added borders to the actual products

<style>
.card-wrapper {
padding: 15px;
}

.card-wrapper.underline-links-hover{
border: 2px solid #ec8474;
}

.card-wrapper .card__inner {
border: 1px solid #ec8474;
}
</style>

[PageFly-Victor]

Hi @Yumhaven ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

[Yumhaven]

Hello there! It's www.yumhaven.com and password is rowsay8876 

[PageFly-Victor]

Hi @Yumhaven ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
div#Banner-template--18521066045746__image_banner {
    border-top: 2px solid #ec8474;
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[Yumhaven]

Thank you for this! Is there a way for me to get a line down the center to separate the two images? I have it around the entire image now which I like, almost there! lol, I truly appreciate your help with this! I tried -center and -middle

  <style>
    div#Banner-template--18521066045746__image_banner {
    border-top: 2px solid #ec8474;
    border-bottom: 2px solid #ec8474;
    border-left: 2px solid #ec8474;
    border-right: 2px solid #ec8474;
  }

[PageFly-Victor]

You can add this code below:

<style>
div#Banner-template--18521066045746__image_banner>div:first-child {
    border-right: 2px solid #ec8474;
}
</style>

[Yumhaven]

So this is ultimately what I want and I do thank you for helping me get this far! I tried making a second style for second-child but that didn't appear to work. What would you suggest from here? If you have any resources in regards to this as well that would be helpful. Thank you again!

[PageFly-Victor · Accepted solution]

For the second child (or div of second image) you can use this class:

div#Banner-template--18521066045746__image_banner>div:nth-child(2) {
   /*Your code*/
}

[Yumhaven]

You rock!

[PageFly-Victor]

Thank you, I'm glad I could help!