Too much space between texts in collection page

[Soiled]

I want to do these changes.

1. Remove the extra spaces between the texts in collection tile in both mobile and web. (especially Mobile)

2. The Sale price need to be by the compare at price towards the right in a single line and it should be bold and i should be able to change it's color and size.

3. They should be left alligned

[websensepro]

Hi @Soiled , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[websensepro · Accepted solution]

@Soiled 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.price.price--on-sale .price__container .price__sale span.price-item.price-item--sale.price-item--last {
    font-weight: bold !important;
    color: red !important;
    font-size: 20px !important;
}
.price.price--on-sale .price__container .price__sale {
    flex-direction: row !important;
}
h3.card__heading {
    margin-bottom: 0 !important;
}
.card__information {
    padding-block: 0 !important;
}
@media screen and (max-width: 768px){
.card__content {
    padding-block: 2px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Soiled]

Where can i find theme.css

[DaisyVo]

Hi @Soiled ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.price.price--on-sale .price__container .price__sale {
    flex-direction: row !important;
}
h3.card__heading {
    margin-bottom: 0 !important;
}
.card__information {
    padding-block: 0 !important;
}
@media screen and (max-width: 768px){
.card__content {
    padding-block: 2px !important;
}
}

Here is the result:

Also, here are additional CSS code that you can add to change size/ color/bold the Price:

.price.price--on-sale .price__container .price__sale span.price-item.price-item--sale.price-item--last {
    font-weight: bold !important;
    color: red !important;
    font-size: 20px !important;
}

Here is the result:

Let me know if it works!

Best,

Daisy