Prestige theme : how to place the "Add to cart" button next to the quantity selector ?

[ChrisRndr]

Hi,

I've been struggling all day long with aligning two elements on the same line on my product page template as it seems to be about more than CSS.

Here's the URL to my preview page : https://wpz3qzw0b6rlg3eb-73117630728.shopifypreview.com/products/lintriguant

You will find visuals below showcasing what I would like to do compared to what I currently have.

Thank you for helping !

[devmont-digital]

Hello @ChrisRndr, 

To align two elements in the same line, follow the steps below:

1. Navigate to Online Store -> Themes -> Edit Code.
2. Find the file "theme.css".
3. Go to the bottom of the page and paste the code.

.product-info__block-item[data-block-type="quantity-selector"] {
    display: inline-block;
    width: 30%;
}

.product-info__block-item[data-block-type="buy-buttons"] {
    display: inline-block;
    width: 70%;
}

[Raj-webdesigner · Accepted solution]

1. Online Store -> Themes -> Edit Code.
2. Find the file "theme.css".
3. Go to the bottom of the page and paste the code.
   
   put This Css In Yor theme.css

@media screen and (min-width:550px){
	.product-info__block-item[data-block-type="quantity-selector"] {
	    display: inline-block;
	    width: 30% !important;
            margin-right: 5%;
	}
	.product-info__block-item[data-block-type="buy-buttons"] {
	    display: inline-block;
	    width: 65% !important;
	}
}​

[ChrisRndr]

This worked perfectly, thank you so much !

[Mandeepsingh16]

Hi, this works but i want to show the buy it now button in full length.
how can we do so??

[ChrisRndr]

Thanks for your reply, it works !