Jump to content

Mindbody - Buy Now Button Not Working

Go to solution Solved by HimanshuYadav,

Recommended Posts

Hi, I'm working on a Pricing Page and I have to use Mindbody pricing widgets in the code block. It works okay on the desktop view, but in the mobile view the text box and code box extend far, and/or all of the buttons are not in the correct place.

I'm not sure how to stop this from happening. Or how to keep the text and code boxes static/fixed in one spot. I attached a pic of what it looks like while I'm editing it in the desktop view. I have a text box with the pricing information, and then I overlay a code block that is the "buy now" button.

I used the following code in Custom CSS to create the style of the buy now button.

/*style "LOGIN | REGISTER" MINDBODY link to look like button*/
a.loginRegister {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
/*style "BUY NOW" MINDBODY links to look like button*/
a.healcode-pricing-option-text-link {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
/*style "CONTRACTS" MINDBODY links to look like button*/
a.healcode-contract-text-link {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
/*style "GIFT CARD" MINDBODY links to look like button*/
a.healcode-gift-card-text-link {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}

.sqs-col-6 {border: 5px solid #50bdb8; width:40%!important; margin-left: 7%} @media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important; margin-bottom: 5%}}

image.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.