TASTE THEME: Product title and price inline MOBILE ONLY!

[PRETTYFRIDAYS]

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

[fethiyeactiviti]

I need help with that too

fethiye activities 

[Subir]

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.
   
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]

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]

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

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]

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

[Subir]

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;
}
}