Weird Border Problem [Dawn Theme]

Store Design
, ,
1

I’m trying to add borders around my featured collection section on the homepage. Why is the border in the middle thicker then the other borders, it also seems like the top border is thicker as well!.
ALSO, why are the borders not aligned between the image and the content?
See below screenshots!

15love_0-1723644610225.png
15love_0-1723644610225.png1501×520 125 KB

2

Hello @15love
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

3

Thank you for ur time :slightly_smiling_face:
Its 15lovestudio.com PW: TEAM15LOVE!

4

Hi @15love ,

Please explain more about it and send me the store link, I will check it for you

5

Thank you for ur time! Its 15lovestudio.com PW: TEAM15LOVE!

6

Hello @15love

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

#shopify-section-template--16170321674291__featured_collection .card__media { border: unset !important; } #shopify-section-template--16170321674291__featured_collection .card__content { border: unset !important; border-top: 1px solid !important; } #shopify-section-template--16170321674291__featured_collection .media.media--transparent{ border: unset !important; }

niraj_patel_0-1723645330081.png
niraj_patel_0-1723645330081.png1348×512 43.1 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

7
  • Here is the solution for you @15love
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.card-wrapper {
    border: 1px solid black !important;
}
.card__media, .card__content  {
    border: none !important;
}
.card__content {
    border-top: 1px solid !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1723645519273.png
BSSTekLabs_0-1723645519273.png1890×764 91.4 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
8

Hi @15love ,

Please add code CSS:

#shopify-section-template--16170321674291__featured_collection .card__media {
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
}
#shopify-section-template--16170321674291__featured_collection .card__content {
    border-top-width: 0px !important;
}
9

This looks great so far!! but why is the top border thicker than the others?

15love_0-1723648420239.png
15love_0-1723648420239.png1614×270 22.7 KB

10 
.card-wrapper {
    border: 1px solid black !important;
}
.card__media, .card__content  {
    border: none !important;
}
.card__inner+.card__content {
    border-top: 1px solid !important;
}

Can you replace to this code @15love

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
11

Hi @15love ,

Please add code:

.card--media .card__inner .card__content {
    border-top-width: 0px !important;
}
12

Worked ! Thank you for all the help :slightly_smiling_face:

13

Glad to help you. Have a good day @15love .