Shopify themes, liquid, logos, and UX
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>
Solved! Go to the solution
This is an 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*/
}
Hi @Yumhaven ,
Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.
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
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;
}
You can add this code below:
<style>
div#Banner-template--18521066045746__image_banner>div:first-child {
border-right: 2px solid #ec8474;
}
</style>
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!
This is an 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*/
}
You rock!
Thank you, I'm glad I could help!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024