How to amend additional button to be inline and same style as main "add-to-cart" button

Site URL: https://www.labyrinthrecords.net/store/p/alexmedina-algorhytm-biesmans

Hi all,

I have amended the code so the second button ('DIGITAL DOWNLOAD') is inserted after the add to cart button (in my case 'BUY VINYL') - I have tried amending the CSS but have had no luck as of yet... 

How can I make the 2 buttons sit on the same line with the same styling?

<script> jQuery(document).ready(function($) { $('#block-yui_3_17_2_1_1638977023564_39597').insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script>

22 hours ago, Tom_Labyrinth said:

Site URL: https://www.labyrinthrecords.net/store/p/alexmedina-algorhytm-biesmans

Hi all,

I have amended the code so the second button ('DIGITAL DOWNLOAD') is inserted after the add to cart button (in my case 'BUY VINYL') - I have tried amending the CSS but have had no luck as of yet... 

How can I make the 2 buttons sit on the same line with the same styling?

<script> jQuery(document).ready(function($) { $('#block-yui_3_17_2_1_1638977023564_39597').insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script>

Try adding to Home > Design > Custom Css

.product-details {
	.sqs-add-to-cart-button-wrapper {
		margin-bottom: 0 !important;
		width: 50%;
		float: left;
		.sqs-add-to-cart-button {
			line-height: 1 !important;
			padding: 0.9rem 1.503rem !important;
		}
		+ {
			.button-block {
				padding: 0 !important;
				width: 50%;
				float: left;
				clear: unset !important;
				a {
					line-height: 1 !important;
					padding: 0.9rem 1.503rem !important;
				}
			}
		}
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

5 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.product-details {
	.sqs-add-to-cart-button-wrapper {
		margin-bottom: 0 !important;
		width: 50%;
		float: left;
		.sqs-add-to-cart-button {
			line-height: 1 !important;
			padding: 0.9rem 1.503rem !important;
		}
		+ {
			.button-block {
				padding: 0 !important;
				width: 50%;
				float: left;
				clear: unset !important;
				a {
					line-height: 1 !important;
					padding: 0.9rem 1.503rem !important;
				}
			}
		}
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thanks for the suggestion, I have tried this and unfortunately does not work... the "+" triggers a syntax error and when i remove it, the CSS isn't applied. Any ideas? 

10 hours ago, bangank36 said:

Kindly remove the previous code and use the following one

.product-details .sqs-add-to-cart-button-wrapper {
  margin-bottom: 0 !important;
  width: 50%;
  float: left;
}
.product-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
  line-height: 1 !important;
  padding: 0.9rem 1.503rem !important;
}
.product-details .sqs-add-to-cart-button-wrapper + .button-block {
  padding: 0 !important;
  width: 50%;
  float: left;
  clear: unset !important;
}

.product-details .sqs-add-to-cart-button-wrapper + .button-block a {
  line-height: 1 !important;
  padding: 0.9rem 1.503rem !important;
}

 

Thanks for the help, the CSS you suggested got it on the same line - had to add the below too make sure it had the same styling - again thanks!!

14 minutes ago, Tom_Labyrinth said:

Thanks for the help, the CSS you suggested got it on the same line - had to add the below too make sure it had the same styling - again thanks!!

It's good to see this beautiful style on your site