Add to cart CTA

Support
#1

Hi there–

On http://collaborative-staging.com/edfuel/services/peer-learning-communities/, how can I get my “Add to Cart” CTA to “stick” to the buttons below?

Screenshot: https://www.evernote.com/l/AO5a2JTEiQBDW74m3krvbRByMtp_0Rrc5Cw

Thank you for your help!

#2

Hello,

To have sure about your question, do you wanna make a add to cart button with this text?

#3

Hey, thanks for the quick reply! It’s a good question.

There need to be two separate buttons, which have use Paypal URLs, because this class is in two separate locations. The buttons are too small to have “Add the Detroit Class to your Cart,” so want to have the “Add to Cart” instruction sit just above it. I got help on here earlier to make it so that the buttons themselves “stick” the bottom of the box there, but I’m struggling to get the “Add to Cart” text to stick with the two buttons.

Does that help?

Thank you!

#4

Hi There,

You can do same as how you achieve to position the buttons. Add a class to your text and use that CLASS as selector to formulate a custom CSS.

e.g.

.myclass {
	/*some custom css here*/
}

Copy the CSS that you have used on the buttons, you just need to adjust the bottom property to position the “Add to Cart” text on top of the buttons.

Hope it helps,
Cheers!

#5

Of course, you’re right. That worked well, thank you.

Last request here: when I shrink these down, I get varying results on how they’re laid out.

Example 1: https://www.evernote.com/l/AO4Pbb4YbjxFULH_dZ_ji7T44gYhYnAJurI
Example 2: https://www.evernote.com/l/AO72rUPi8dxF17u3yVbj4cznTZaHOdQFClU

Do I have something out of order or is there an additional setting I can tweak to dial these in?

Thank you very much!

#6

Hi There,

There is only one result about that actually, the button with the CLASS my-btn-tools goes back to its original position when the screen width is 767px and below. That is because the custom CSS applied to it is intended for desktop view only. If you want to keep the button position on mobile, please look for this custom CSS block:

@media (min-width: 768px) {
	.x-column.product-box {position: relative;}
	.x-btn.my-btn-tools {
	position: absolute;
	bottom: 0;
	margin-bottom: 20px;
	width: calc(100% - 40px);
	}
}

And bring the CSS rules outside of the @media (min-width: 768px) query, that is:

.x-column.product-box {position: relative;}
	.x-btn.my-btn-tools {
	position: absolute;
	bottom: 0;
	margin-bottom: 20px;
	width: calc(100% - 40px);
	}

Cheers!

#7

Oh, I see. I was overriding the default there. Got it, makes sense.

That’s really helpful and worked great. Thank you so much!

#8

You’re more than welcome, glad we could help.

Cheers :slight_smile: