I am trying to BOLD the link label on our mulit-column cards and relocate it to the bottom left or right of each card. Have tried to troubleshoot but to no avail. I just switched to dawn today.
Thanks,
Matt
Topic summary
A Shopify store owner recently switched to the Dawn theme and needs help styling multi-column card link labels. They want to:
Goals:
- Make the link label text bold
- Relocate it to the bottom left corner of each card
- Maintain uniform positioning across all cards
Attempted Solution:
A community member provided CSS code using media queries to position the links with position: absolute at various bottom percentages for different screen sizes.
Current Status:
The proposed CSS solution did not achieve the desired result. The original poster shared a mockup showing their exact vision (link labels uniformly positioned in the bottom left of the text area and bolded), but the implementation still doesn’t match their requirements.
Outstanding Issue:
The discussion remains unresolved, with the store owner still seeking a working solution to properly position and style the link labels as shown in their mockup.
1 Like
Hi @kenny
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 1112px){
.multicolumn-card__info .link {
position:absolute;
bottom: 40%;
}
}
@media only screen and (max-width: 1112px){
.multicolumn-card__info .link {
position:absolute;
bottom: 45%;
}
}
@media only screen and (max-width: 989px){
.multicolumn-card__info .link {
position:absolute;
bottom: 15%;
}
}
@media only screen and (max-width: 650px){
.multicolumn-card__info .link {
position:absolute;
bottom: 30%;
}
}
- And Save.
- Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Apologies, but hoping to have it uniform in the left corner of the text area and bolded, like the attached mock-up.
