Center align EVERYTHING in featured product section, Debut theme

[jasondeleidi]

Hello, I was looking to Center allign everything in the featured product section in Debut theme.

That is: Title, buttons, price, product description etc..

___

Site url: www.jasondeleidi.com

At the moment feat. product image it's been intentionally removed using script, it should remain hidden.

Thanks in advance

[dmwwebartisan]

@jasondeleidi 

Are you talking about this section? Please let me know.

[jasondeleidi]

@dmwwebartisan 

Yes, that's it.

[dmwwebartisan]

@jasondeleidi 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (min-width: 750px){
#shopify-section-1599759698099 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599759698099 .price {display: inline-grid;}
#shopify-section-1599759698099 .product-single__title {text-align: center;}
#shopify-section-1599759698099 .product__policies {text-align: center;}
#shopify-section-1599759698099 .product-form--payment-button-no-variants {max-width: 100%;width: 33%;text-align: center;margin: 0 auto;}
}

Let me know if this works.

Thanks!

[jasondeleidi]

@dmwwebartisan 

This affected only the first featured product.

The following one is still aligned to the left.

Moreover it did not affect the price.

Can you please help me center align the price and the other feat. product section?

many thanks

[dmwwebartisan]

@jasondeleidi 

Sure, Let me check.

Thanks!

[dmwwebartisan]

@jasondeleidi 

Remove old code and place this new code theme.scss.liquid file at the bottom.

@media only screen and (min-width: 750px){
#shopify-section-1599759698099 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599759698099 .price {display: inline-grid;}
#shopify-section-1599759698099 .product__price, .featured-product__price {text-align: center;}
#shopify-section-1599759698099 .product-single__title {text-align: center;}
#shopify-section-1599759698099 .product__policies {text-align: center;}
#shopify-section-1599759698099 .product-form--payment-button-no-variants {max-width: 100%;width: 33%;text-align: center;margin: 0 auto;}


#shopify-section-1599762053516 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599762053516 .price {display: inline-grid;}
#shopify-section-1599762053516 .product__price, .featured-product__price {text-align: center;}
#shopify-section-1599762053516 .product-single__title {text-align: center;}
#shopify-section-1599762053516 .product__policies {text-align: center;}
#shopify-section-1599762053516 .product-form--payment-button-no-variants {max-width: 100%;width: 33%;text-align: center;margin: 0 auto;}

Let me know if this works.

Thanks!

[jasondeleidi]

Thank you, @dmwwebartisan 

This is right what i was looking for,

I've noticed that this is not effective in mobile view

Would you be able to make everything center align on mobile devices too?

Thank you very much

[dmwwebartisan]

@jasondeleidi 

Let me give you a code for mobile.

Thanks!

[dmwwebartisan · Accepted solution]

@jasondeleidi 

Please add this for mobile.

@media only screen and (max-width: 749px){
#shopify-section-1599759698099 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599759698099 .price {display: inline-grid;}
#shopify-section-1599759698099 .product__price, .featured-product__price {text-align: center;}
#shopify-section-1599759698099 .product-single__title {text-align: center;}
#shopify-section-1599759698099 .product__policies {text-align: center;}

#shopify-section-1599762053516 .medium-up--two-thirds {width: 100%;}
#shopify-section-1599762053516 .price {display: inline-grid;}
#shopify-section-1599762053516 .product__price, .featured-product__price {text-align: center;}
#shopify-section-1599762053516 .product-single__title {text-align: center;}
#shopify-section-1599762053516 .product__policies {text-align: center;}
}

Hope this works.

Thanks!

[jasondeleidi]

Thank you very much, now everythink is fixed!