Dawn theme: How to center Featured Collections?

Solved
earthtoplanet
Tourist
31 5 2

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
Tourist
31 5 2

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
269 22 52

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
- Should you need any direct help: contact@ecommpremium.com
- SKYPE: ahsanaliawan
- shopifyexperts
earthtoplanet
Tourist
31 5 2

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
Tourist
31 5 2

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