IMPORTANT PLS: Help needed with fixing text in the product cards (featured collection)

[RaghavGoel1]

Hey all, 

I'm facing trouble with how text and other elements are appearing on my product cards (both mobile and desktop) in featured collection. Im on DAWN THEME. Right now they are looking like this:

  As you can see, several issues with this:

On Mobile
1) Add to carts button are not aligned
2) Font size of the price should be smaller so that it fits in one single row
3) Product Name should be bigger and bolder

On Desktop
1) Add to carts button are not aligned
2) Overall spacing between the texts feels deranged. Feeling very clutterd.

Link to my site- https://f40566-d3.myshopify.com/

Can someone please please help in fixing these? They were okay a while ago but somehow got deranged while I was editing and now I can't diagnose how. 

Thanks a ton!

[BSSCommerce-B2B]

Hi @RaghavGoel1 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

  .color-scheme-2.isolate.gradient .grid__item.slider__slide:first-child .quick-add.no-js-hidden {
    padding-top: 65px !important;
  }
  span.price-item.price-item--sale.price-item--last,
  .collection .price-item.price-item--regular {
    font-size: 12px !important;
  }
  .card__heading.h5 {
    font-size: large !important;
    font-weight: bold !important;
  }

 

Step 3: Save and reload home page.

=>> The result: 

#Mobile:

#Desktop:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[RaghavGoel1]

Hey thanks for the solution, however, it did not seem to work...they're still appearing the same. Can you please look into this?
 

[BSSCommerce-B2B]

Hi @RaghavGoel1 , 

What device you use to view this page? 

I used Iphone 12 and the display like image below: 

Or you can change the font size of text  smaller to certain that it fits in one single row.  

Example:

.color-scheme-2.isolate.gradient .grid__item.slider__slide:first-child .quick-add.no-js-hidden {
    padding-top: 65px !important;
  }
  span.price-item.price-item--sale.price-item--last{
    font-size: 11px !important;
  }
  .collection .price-item.price-item--regular {
    font-size: 11px !important;
  }
  .card__heading.h5 {
    font-size: large !important;
    font-weight: bold !important;
  }

Hope it helps, 

If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[RaghavGoel1]

Unfortunately, its still showing up in two separate lines in mobile view.