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 3 (3)
Ecommpremium
Shopify Partner
428 36 81

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
-Upwork
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