How do I center text and make text bigger from the feature collection section of the homepage?

[valkyriebg]

From the feature collection section of the homepage, how do I...

1. make the product name bigger,

2. center the product name, price, star ratings

3. make the font size of the crossed-off part of the price the same as the other price?

I'm using the Dawn theme. My website is https://forsetiwatches.com/

This is what it looks like now:

and this is what I want it to look like. 

Thank you so much for your help.

[polishedCode · Accepted solution]

Hi @valkyriebg 

1. Go to Online Store --> Theme --> Customize 

2. Go to the featured collection and scroll to the custom css section and add the following code

.loox-rating{
display:flex;
justify-content:center;
}

.card__heading{
font-size: 2rem;
}

.card__heading, .price{
text-align:center;
}

.price--on-sale .price-item--regular{
font-size:1.6rem;
}

To make this edit across all featured collections do the following: 

*Remember to always make a duplicate of your live theme when making code changes that way you have something to fall back on.

1. Go to Online Store --> Theme --> edit code

2. find the base.css file & paste the following code at the bottom

.loox-rating{
display:flex;
justify-content:center;
}

.card__heading{
font-size: 2rem;
}

.card__heading, .price{
text-align:center;
}

.price--on-sale .price-item--regular{
font-size:1.6rem;
}

[Tech_Coding]

Hello @valkyriebg 

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 </body> on theme.liquid
<style>
    ul#Slider-template--23069937860901__featured_collection_znctWE .card__content .card__information {
         margin: 0 auto;
     }
     ul#Slider-template--23069937860901__featured_collection_znctWE .full-unstyled-link{
          font-size: 20px !important;
     }
     ul#Slider-template--23069937860901__featured_collection_znctWE .loox-rating, .price.price--on-sale {
        text-align: center !important;
     }
     ul#Slider-template--23069937860901__featured_collection_znctWE s.price-item.price-item--regular {
         font-size: 1.6rem !important;
     }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

HI @valkyriebg 

Please add this code to Custom CSS of that section 

.card__heading,
.card-information { text-align: center; font-size: 18px; }
.price--on-sale .price-item--regular,
.price { font-size: 18px; font-weight: 600; }