TASTE THEME: Product title and price inline MOBILE ONLY!

PRETTYFRIDAYS
Pathfinder
197 0 34

Hey, I have been trying everything to make this work but nothing did! Could anyone help me with this? The product title needs to be inline with the product price on the collection page as shown below. My theme is Taste

LINK:https://e8aaa0-3.myshopify.com/collections/best-selling-products

PASSWORD: mohwhi

Image 13-12-2023 at 08.17.jpeg

 

Replies 6 (6)

fethiyeactiviti
Visitor
1 0 0

I need help with that too

 

 

fethiye activities 

http://fethiyetours.com/

Subir
Shopify Partner
9 0 1

Hey @PRETTYFRIDAYS 

You can achieve this using CSS. Follow the steps below:

 

  1. Add an extra class (inline-items) to "card__information," as shown in the screenshot.
    e543c2a1-a5b2-4138-bde7-ffc17cf58d8c.png
  2. After that add below rule within current CSS (component-card.css) file.

 

.inline-items {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}​

You can add this at the end of stylesheet.

Thanks!

 

PRETTYFRIDAYS
Pathfinder
197 0 34

Hey, thanks for replying but I don't see the line where I am supposed to be putting the inline code, could you help me with finding this?

Subir
Shopify Partner
9 0 1

you can find the file within snippets section with name "card-product.liquid"

a059f0f6-4326-4def-9b91-b88fdade61b4.png

Add the class here near "card__information".


Or You can use this CSS without adding class.

 

.product-card-wrapper .card__content > .card__information {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}
.product-card-wrapper .card__content > .card__information .card-information {
    width: auto;
}
.product-card-wrapper .card__content > .card__information .price__regular {
    white-space: nowrap;
}

 

Please add this CSS at the end of component-card.css file.

PRETTYFRIDAYS
Pathfinder
197 0 34

Hey! really appreciate your help and it did in fact work, but I only want it for desktop, how do I do this?

Subir
Shopify Partner
9 0 1

Just wrap above CSS within media queries, like this

@media screen and (min-width: 1025px) {
.product-card-wrapper .card__content > .card__information {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}
.product-card-wrapper .card__content > .card__information .card-information {
    width: auto;
}
.product-card-wrapper .card__content > .card__information .price__regular {
    white-space: nowrap;
}
}