Add to cart + Quantity position / Markdowns in Product Details

Hello!

First time posting here.. I'm an absolute beginner when it comes to website designing in general and it seems i've been somewhat "forced" into utilizing some CSS to get any chance or coming closer to my ideal store design..

I managed to play around with margins, padding whatnot and have a rough idea of what to do to control the display for mobile and desktop versions.. 

I want my Quantity and Add to cart buttons to be directly under the price and in one line. 

Like this.

I have added a markdown block as well as a lightbox text link and embedded them into my main product description window ( instead of having it below the gallery and details ) using this in my footer: 

<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-markdown").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>
<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-code").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>

I noticed that if i only play with margins to position my quantity and add to cart where i want them, they move up and down as I expand and collapse my markdowns...I believe its because both quantity and the button are still embedded in the same place ( below the markdowns ) but are forced to appear higher than they actually sit.. How do I go about this? I want to keep the them where they are on the attached photo but at the same time keep my markdowns and lightbox links right below product details.. 

Any help is greatly appreciated. 

once again i've literally discovered css yesterday...

26 minutes ago, Jarren88 said:

Hello!

First time posting here.. I'm an absolute beginner when it comes to website designing in general and it seems i've been somewhat "forced" into utilizing some CSS to get any chance or coming closer to my ideal store design..

I managed to play around with margins, padding whatnot and have a rough idea of what to do to control the display for mobile and desktop versions.. 

I want my Quantity and Add to cart buttons to be directly under the price and in one line. 

Like this.

I have added a markdown block as well as a lightbox text link and embedded them into my main product description window ( instead of having it below the gallery and details ) using this in my footer: 

<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-markdown").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>
<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-code").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>

I noticed that if i only play with margins to position my quantity and add to cart where i want them, they move up and down as I expand and collapse my markdowns...I believe its because both quantity and the button are still embedded in the same place ( below the markdowns ) but are forced to appear higher than they actually sit.. How do I go about this? I want to keep the them where they are on the attached photo but at the same time keep my markdowns and lightbox links right below product details.. 

Any help is greatly appreciated. 

once again i've literally discovered css yesterday...

Could you share your current site url (with site wide password) so we can help having a look?

https://angeliqueskincare.com/shop

It's open, only the home page requires a password.

Something died since I posted that and the buttons are all in a weird position now but they still move once tabs are opened.

5 minutes ago, Jarren88 said:

https://angeliqueskincare.com/shop

It's open, only the home page requires a password.

Something died since I posted that and the buttons are all in a weird position now but they still move once tabs are opened.

could you remove the custom css you placed for the quantity and add to cart button so I can see them in their origin position? then I can provide a solid answer

I removed everything that affected the quantity box, add to card button and positioning of details outside of title and price.

all that remains now is 

.markdown-block p {
margin-left:1.5em;
  text-align: left;
}
.markdown-block .ui-closed:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"+ ";
}

.markdown-block .ui-open:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"- ";
}
.ProductItem .ProductItem-details {
    padding-top: 0em;
    margin-top: 0.5em;
  text-align: left;
}
 

19 minutes ago, Jarren88 said:

I removed everything that affected the quantity box, add to card button and positioning of details outside of title and price.

all that remains now is 

.markdown-block p {
margin-left:1.5em;
  text-align: left;
}
.markdown-block .ui-closed:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"+ ";
}

.markdown-block .ui-open:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"- ";
}
.ProductItem .ProductItem-details {
    padding-top: 0em;
    margin-top: 0.5em;
  text-align: left;
}
 

I modified your js snippet and the custom css

<script>
	jQuery(document).ready(function($) {
    	$(".ProductItem-details .sqs-add-to-cart-button-wrapper, .collection-type-products .ProductItem-details .product-quantity-input").wrapAll("<div class='product-quantity-wrap'></div>" );
		$(".product-quantity-wrap").insertAfter('.ProductItem-product-price');
    });
</script>

.quantity-label {
  display: none;
}
.collection-type-products .ProductItem-details .product-quantity-input {
  display: inline-block !important;
  float: left;
  width: auto;
}
.collection-type-products .ProductItem-details .product-quantity-input input {
      padding: 1rem;
    margin-right: 10px;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
  display: inline-block;
    margin: 0;
  width: auto;
}
.ProductItem-details .ProductItem-product-price {
  margin-bottom: 0;
}
.product-quantity-wrap {
  margin-bottom: 25px;
}
@media only screen and (max-width: 768px) {
    .product-quantity-wrap {
      order: 2;
      margin-bottom: 0px;
    }
}

It worked!!!

Thank you so much!

9 minutes ago, Jarren88 said:

It worked!!!

Thank you so much!

 

You rock!

9 minutes ago, Jarren88 said:

It worked!!!

Thank you so much!

 

I have a plugin that can display different markdown for different products in case you looking for it

No, you! 

If i can bother you a little longer.. how would I go about changing the gallery on the left to appear as circles rather than squares? I've looked up some codes but it seems they would affect more than just that part.

2 minutes ago, bangank36 said:

I have a plugin that can display different markdown for different products in case you looking for it

I'm currently looking to have my markdowns fairly consistent for all products. Just text editing under each of them. Though I'll definitely keep that in mind should I decide to expand beyond those 🙂