Dawn theme: How to center Featured Collections?

[earthtoplanet]

I just switched from Minimal to Dawn and with a code tweak I was able to adjust the number of products featured in the homepage's Featured Collections to one. However, on desktop it's left-aligned. 

What code change can I make to center this single product in the Featured Product section on desktop?

Theme: Dawn
Site: www.earthtoplanet.com
Featured Collection: Titled The Latest Cartoon

If it's helpful, the code change I made to limit the number of Featured Products to one was this:

1. Sections/featured-collection.liquid
2. Changed "min" from 2 to 1 and "step" from 2 to 1

    {
      "type": "range",
      "id": "products_to_show",
      "min": 1,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },

 Thank you

[Ecommpremium]

Hi @earthtoplanet  this is very simple.

Just find class of featured product by inspecting section with right click then apply this to make it center!

Apply below code in the bottom of base.css file and don't forget to replace classname with exact class starting with dot(.)

.classname {
align-content: center !important;
}

[earthtoplanet]

Hi @Ecommpremium, thank you for your help.

So far, I've been unsuccessful in identifying the proper class. Here's the screenshot of what I see when I inspect element:

I've tried the following but so far none have successfully centered the Featured Collection:

.grid grid--2-col product-grid grid--3-col-tablet negative-margin {
align-content: center !important;
}

.grid__item {
align-content: center !important;
}

.collection page-width {
align-content: center !important;
}

.slider-mobile-gutter {
align-content: center !important;
}

Any ideas?

Thanks!

[earthtoplanet · Accepted solution]

Another user (@suyash1) helped me figure this one out. It worked once I added the following to the bottom of base.css:

#shopify-section-template--14244790960243__featured_products .title-wrapper-with-link{text-align: center;
justify-content: center;}

#shopify-section-template--14244790960243__featured_products .grid{justify-content: center;}

#shopify-section-template--14244790960243__featured_products .card-information__wrapper > .price

[BrunoShop]

Hello!

Could you please explain what exactly did you used after "...template--"?
Beacause when inspecting I see long names as those:
14379610734894__59f7cad8-5698-4a50-90ec-faab5b97624d

I'v tried with part of the code, all of it, adding "_featured_products" at the end, removing it...

Nothing worked for me.

I would appreciate some help there!

Thanks a lot

[Ecommpremium]

hi @BrunoShop 

can you have a look at these videos very helpful for how to apply custom CSS.

and for templete after thing use it as a section id have a look at this section id in image 

[BrunoShop]

Hi @Ecommpremium 

Thanks for your fast answer.

I was using wrong ID, used the good one thanks to your screenshot, and worked perfectly 🙂

Thanks a lot for your time!

Have a great day!

[Jahid-KlinKode]

Hi @earthtoplanet, learn how to center featured collections in the Shopify Dawn Theme by watching this short tutorial: https://www.youtube.com/watch?v=LNCzj6cxw1s.