Jump to content

Custom CSS blocking my scheduling widget

By CaseyNewton, in Code Blocks

Go to solution Solved by SaranyaDesigns,

Recommended Posts

CaseyNewton Level 2

CaseyNewton

Posted
Posted

When we launched our site, someone hired a web developer (whose contact info is lost) who wrote some custom CSS for us, and I'm running into a new issue where there is a transparent shape that is blocking a portion of my scheduling widget (scheduling widget is done through Mindbody). I need to remove a portion of the code but I don't know what to remove. I'd love any help!!

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

CaseyNewton
CaseyNewton

@SaranyaDesigns That fixed it!! Thank you SO SO much!!! You have seriously made my day. Actually you made my whole month. We really appreciate your generous help!

CaseyNewton Level 2

CaseyNewton

Posted
  • Author
Posted

@SaranyaDesigns Yes! Thank you so much. I run a dog training facility and it's happening on all of my group class pages. Here's one example. The effected class pages are Good Puppy, Great Puppy, Wonder Puppy, Calm + Focused, Reliable Puppy, and Tricky Puppy. On all of these pages, the timeframe section (that shows the time that the class takes place) is somehow overlapping the "Book" button, which is making only the corners clickable.

Link to comment
  • Solution
SaranyaDesigns Level 5

SaranyaDesigns

Posted
  • Solution
Posted

Ok @CaseyNewton yup I see it. Ok so you need to go into your custom CSS and find this block of code: 

@media (min-width: 640px) {
.healcode.enrollments table.enrollments tr td.healcode-button-field {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translatey(-50%);
    padding-right: 0 !important;
	}
}

Once you find it, just add another line to it that says "z-index: 5;", so the whole thing looks like this: 

@media (min-width: 640px) {
.healcode.enrollments table.enrollments tr td.healcode-button-field {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translatey(-50%);
	padding-right: 0 !important;
	z-index: 5;
	}
}

That should fix it! If you have trouble finding it, you can just add this to the bottom of your CSS instead: 

@media (min-width: 640px) {
.healcode.enrollments table.enrollments tr td.healcode-button-field {
	z-index: 5;
	}
}

It should do the same thing. Let me know?

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources