Bring content at centre in featured collection in debut theme

Store Design
1

The title and price is left aligned in featured collection in debut theme. I want to bring it to centre. How can I do it? Also gap between slideshow and featured collection is more. I want to decrease it. Also I want to bring header content closer to slideshow. How to di it? Please help.

store URL: https://greendeerkids.myshopify.com/

ps: green

@suyash1 @Sajeel @KetanKumar

Inked01screencapture-greendeerkids-myshopify-2022-02-24-21_30_27_LI.jpg
Inked01screencapture-greendeerkids-myshopify-2022-02-24-21_30_27_LI.jpg350Ă—912 34.9 KB

1 Like
2

To Center the text, please add the following code to the end of your theme.css file:

.h4.grid-view-item__title.product-card__title {
    text-align: center;
    display: block;
}

.price__regular {
    margin-right: 0px;
}

For the section spacing, try the following code:

@media only screen and (max-width: 749px)
{
a.btn.slideshow__btn.slideshow__btn--mobile {
    margin-top: 0px;
}
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

3

Add this at the end of theme.css

this code is for all devices

#shopify-section-1645210047a84704f4 .product-card {text-align: center;}

#shopify-section-1645210047a84704f4 .product-card .price–listing{align-items: center !important;}

this will be for mobile devices

@media only screen and (max-width: 749px){

#shopify-section-1645210047a84704f4 .product-card {text-align: center;}

#shopify-section-1645210047a84704f4 .product-card .price–listing{align-items: center !important;}

}

4

I tried top code to align title and pricing at centre. It made title at centre but not pricing.

5

you used my code?

6

Add this code

.product-card {text-align: center;}

.product-card .price–listing{align-items: center !important;}

this will be for mobile devices

@media only screen and (max-width: 749px){

.product-card {text-align: center;}

.product-card .price–listing{align-items: center !important;}

}

.price__regular, .price__sale {margin-right:unset !important;}

7

thank you so much. it worked

1 Like
8

No problem :slightly_smiling_face:

9

What if I want to do for desktop as well

10

remove previous code you added and use this one

Add this code

.product-card {text-align: center;}

.product-card .price–listing{align-items: center !important;}

.price__regular, .price__sale {margin-right:unset !important;}