A user seeks help implementing an inline layout for product titles and prices on their collection page, specifically for desktop view only. They provide:
Another user responds with a CSS solution:
Implementation steps:
base.css file.product-grid .grid__item .card__informationjustify-content: space-between to position title and price at opposite endsThe solution appears to address the desktop-only requirement through the media query, though the conversation ends without confirmation of whether the implementation was successful.
Hey, I am designing my store and saw this amazing website where they had their price inline with their product title on their collection page. Could anybody help me with this? Thanks in regard!
NOTE: ONLY FOR DESKTOP!
LINK:https://e8aaa0-3.myshopify.com/collections/body
PASSWORD:mohwhi
THEME: TASTE
Hello
Please add the given CSS in base.css file
@media only screen and (min-width: 750px) {
.product-grid .grid__item .card__information {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.product-grid .grid__item .card-information {
line-height: 0;
font-size: 18px;
}
}
Thanks
