Need Help with Coding To Make Font Smaller - Theme Only Allows for 100%

Store Design
, ,
1

Hi, we would appreciate some help with coding on making the font smaller for the Names of the products and pricing on our website as well as the “shop all” text in the top left corner. We would also like them to be side by side if possible, but if that is not possible just smaller font would be appreciated.

Theme name: Fleetwood Cadillac

The URL: https://cyrusnazari.com/collections/shop-all

Thank you for the help.

2

Hello @cyrusnazari

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection .card-information .price { font-size: 14px; text-align: -webkit-center; margin-top: unset !important; } .collection .card-information { width: 100%; } .collection .card__information h3 { font-size: 11px; width: 100%; text-align: right; }
1 Like
3

Thank you so much this worked great. Is there a code we can add to make the Name of the Product and the Pricing Side by Side?

4

Hello @cyrusnazari
Did below solution work?
If solution worked then accept solution.

1 Like
5

Hello @cyrusnazari

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.card__information { display: flex; justify-content: center; align-items: center; }
6

Hi, the previous code worked for the smaller font but this one didn’t work for the price and name alignment. Is this the correct way to place it?

.collection .collection-hero__text-wrapper h1 { font-size: 30px; line-height: 40px; letter-spacing: 1px; } .collection .card__information h3 { font-size: 11px; } .collection .card-information .price { font-size: 12px; } .card__information { display: flex; justify-content: center; align-items: center; }
7

Hello @cyrusnazari
Yes this is the correct way and I have given you the code above for alignment.
This is the code for alignment

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection .card__information { display: flex; justify-content: center; align-items: center; }
1 Like