Dawn theme: How to center Featured Collections?

Solved
earthtoplanet
Explorer
46 6 6

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

Accepted Solution (1)

Accepted Solutions
earthtoplanet
Explorer
46 6 6

This is an 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

 

View solution in original post

Replies 6 (6)
Ecommpremium
Shopify Partner
450 36 83

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;
}

 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
earthtoplanet
Explorer
46 6 6

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:

earthtoplanet_0-1636904822703.png

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
Explorer
46 6 6

This is an 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
New Member
2 0 0

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
Shopify Partner
450 36 83

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 bgv.PNG

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
BrunoShop
New Member
2 0 0

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!