Hello,
I’m trying to move price and text from card_information in line from Quick view. Where I draw the white line.
Url: https://www.lasdunasbyron.com/collections/unisex
Thanks for your time and help
Topic summary
A user seeks to align the price and text from the card_information section horizontally with the quick view button on their collection page, rather than having them stacked vertically.
Proposed Solutions:
Two community members provided CSS-based fixes to modify the card layout:
-
SideNode’s approach: Add CSS to
base.csstargeting.card-wrapper .card__contentwithflex-direction: unset!importantandjustify-content: space-evenly -
websensepro’s approach: More comprehensive CSS modifications including:
- Setting
.card__informationtodisplay: flexwithalign-items: center - Adjusting
.card-informationwidth toauto - Adding padding and margin adjustments to
.card__heading - Modifying
.card__contentflex properties
- Setting
Status: Both solutions include screenshots demonstrating the visual result. The discussion remains open as the original poster has not confirmed which solution worked or marked a resolution.
May this help you.
1: Go to online store > themes > Actions > Edit code > ASSESTS > base.css Add this code at the bottom.
.card-wrapper .card__content {
flex-direction: unset!important;
justify-content: space-evenly;
}
If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode
Hi, @BERNAT-LASDUNAS .
Follow These Steps.
Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.
.card__information {
display: flex;
align-items: center;
}
.card-information {
width: auto;
}
.card__content {
align-items: center;
}
.card__heading {
padding: 0 10px;
margin-top: 8px;
}
.card__content {
display: flex !important;
flex-direction: row;
margin-top: 10px !important;
justify-content: space-between;
padding: 5px 15px !important;
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
May this help you.
1: Go to online store > themes > Actions > Edit code > ASSESTS > base.css Add this code at the bottom.
.card-wrapper .card__content {
flex-direction: unset!important;
justify-content: space-evenly;
}
If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode