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
Yes, that’s it.
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!
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
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!
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
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!
Thank you very much, now everythink is fixed!