Jump to content

Mindbody Widget - CSS not applying on iPhone/Mobile

Recommended Posts

Site URL: https://cby.squarespace.com/schedule?password=test

Hi all -

I'm integrating a couple of Mindbody Widgets into my client's site, and for their Enrollment Widget ("Upcoming Events") I've applied CSS into Squarespace's Custom CSS rules, as well as the widget's own internal CSS rules. I've tested each separately, and the styling applies on chrome and safari, at any screen size. 

However, when I go to visit the webpage on my phone, the styling completely disappears (pics below). Any thoughts to why this might be happening? I can't seem to figure it out....TIA!

IMG_8E52F44B973B-1.thumb.jpeg.3b26e90c66d58993f13575dbe1b0f3c3.jpeg  1982343513_ScreenShot2021-12-16at10_56_33PM.thumb.png.784465da8fa4defa767e3d1a1ef47e1b.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

23 minutes ago, MayaViolet said:

Site URL: https://cby.squarespace.com/schedule?password=test

Hi all -

I'm integrating a couple of Mindbody Widgets into my client's site, and for their Enrollment Widget ("Upcoming Events") I've applied CSS into Squarespace's Custom CSS rules, as well as the widget's own internal CSS rules. I've tested each separately, and the styling applies on chrome and safari, at any screen size. 

However, when I go to visit the webpage on my phone, the styling completely disappears (pics below). Any thoughts to why this might be happening? I can't seem to figure it out....TIA!

Looks like a widgets has own basic mobile styles You also should to add custom CSS for the mobile view.

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
17 hours ago, SquareRefresh said:

Looks like a widgets has own basic mobile styles You also should to add custom CSS for the mobile view.

Yep, you're right! Looks like the titles, teachers and buttons are assigned different classes in mobile (ie .mbo_class a versus .healcode-enrollment-name a). Thanks for that note. Was able to identify them by inspecting my phone directly, since the mobile-simulated screen size on desktop didn't have the same effect.

 

Thanks friend, appreciate the help!

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.