Reduce text size of product name and price in collections page

Store Design
1

Hello,

I am using Sense theme and my store URL is https://www.dastanthelabel.com/. The text size of product name and price is pretty huge in the collections page and is occupying a lot of space (in the mobile view) and I’d like to reduce that. I have attached a photo for reference below. Your help is highly appreciated.

Screenshot 2022-03-28 151808.jpg
Screenshot 2022-03-28 151808.jpg359×594 33.8 KB

1 Like
2

@tanmaymehta

h3.card__heading.h5 a {
    font-size: 14px !important;
}
.price__container {
  font-size: 12px !important;
}

@media only screen and (max-width: 600px) {
h3.card__heading.h5 a {
    font-size: 14px !important;
}
.price__container {
  font-size: 12px !important;
}
}
  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/component-card.css ->paste Above code at the bottom of the file.
  3. Save it.
1 Like
3

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (max-width: 420px){
.gradient ul#product-grid li.grid__item .card-wrapper .card .card__content .card__information h3.card__heading.h5 {
font-size: 13px;
}

.gradient ul#product-grid li.grid__item .card-wrapper .card .card__content .card__information .card-information .price {
font-size: 14px;
margin-top: 5px;
}
}
4

Hi @tanmaymehta ,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Here are the Solutions!

Go to Online Store->Theme->Edit code

Asset->/component-price.css ->paste the below code at the bottom of the file.

h3.card__heading.h5 a {
    font-size: 14px !important;
}
.price__container {
  font-size: 12px !important;
}

@media only screen and (max-width: 600px) {
h3.card__heading.h5 a {
    font-size: 14px !important;
}
.price__container {
  font-size: 12px !important;
}
}

If you have any concerns feel free to ask me!

Regards,
Ani

5

Hi @tanmaymehta ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css->paste below code at the bottom of the file:
.card__heading.h5 a {
    font-size: 14px !important;
}
.price__container {
  font-size: 12px !important;
}

@media only screen and (max-width: 600px) {
  .card__heading.h5 a {
     font-size: 14px !important;
  }
  .price__container {
   font-size: 12px !important;
  }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

2 Likes
6

Ok, it’s very nice!

7

Hello @tanmaymehta !
Please add the below CSS to base.css theme file at the bottom to reduce the text size:

.card-information>*:not(.visually-hidden:first-child)+*:not(.rating) {
    font-size: 14px !important;
}
.card__heading {
    font-size: 14px !important;
}

Hope this will help you out.

8

Hi i would just like to ask, the first CardHeading and PriceContainer before the “@media”, are those for the laptop version? and the second CardHeading and PriceContainer for the mobile ones ?, Thanks.