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

Store Design
, ,
1

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.

Yumhaven_0-1680730453148.png
Yumhaven_0-1680730453148.png2494×797 321 KB

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>
2

Hi @Yumhaven ,

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

3

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

4

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 :

PageFlyVictor_0-1680731720130.png
PageFlyVictor_0-1680731720130.png1892×832 226 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

5

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

6

You can add this code below:
7

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!

8

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*/
}
1 Like
9

You rock!

1 Like
10

Thank you, I’m glad I could help!