How to use media queries to modify scheduling widget CSS for different screen sizes

Other Questions Calendly
1

I’m still learning CSS and having trouble with a scheduling widget on mobile devices. The widget shows a vertical scrollbar on smaller screens which doesn’t look good.

Current widget code:

<div class="booking-inline-widget" data-url="https://example.com/booking-link" style="min-width: 300px; height: 650px;"></div>
<script type="text/javascript" src="https://example.com/widget-script.js"></script>

The desktop version displays perfectly, but mobile users see an unwanted scrollbar. I tried using media queries to change the height for smaller screens:

@media only screen and (max-width: 768px) {
    .booking-inline-widget {
        height: 1000px;
    }
}

The CSS changes don’t seem to work though. What am I missing here?

2

This isn’t just about inline style specificity. I hit the same issue with booking widgets - their JavaScript keeps rewriting the DOM after your CSS loads. Here’s what worked for me:

Use a data attribute approach with a delay:

[data-mobile-adjusted] .booking-inline-widget {
    height: 100vh !important;
    max-height: 100vh !important;
}

Then add this JS after the widget loads:

setTimeout(function() {
    if (window.innerWidth <= 768) {
        document.body.setAttribute('data-mobile-adjusted', 'true');
    }
}, 1000);

This waits for the widget to fully load before applying mobile styles. The data attribute gives you higher specificity without media queries that third-party scripts usually ignore. I’ve had better luck with this than wrapper containers since some widgets break when you mess with their DOM structure.

Also throw in box-sizing: border-box to avoid padding issues that cause scrollbars on mobile.

3

Third party widgets and CSS are always a nightmare. Those inline styles are definitely the problem, but there’s a cleaner fix than spamming !important everywhere.

I hit the same wall with booking widgets at my last job. What worked was wrapping the widget in a responsive container and targeting that instead of fighting the widget directly.

Wrap your widget like this:

<div class="widget-container">
    <div class="booking-inline-widget" data-url="https://example.com/booking-link" style="min-width: 300px; height: 650px;"></div>
</div>

Then style the container:

.widget-container {
    width: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    .widget-container {
        height: 100vh;
    }
    .widget-container .booking-inline-widget {
        height: 100% !important;
        transform: scale(0.8);
        transform-origin: top left;
    }
}

The transform scale trick saves you when widget content is too wide for mobile. Learned this fighting embedded payment forms that wouldn’t play nice.

This video explains media queries really well if you want to dig deeper:

Heads up - some widgets inject their own CSS after page load, so you might need a slight delay or MutationObserver to reapply your styles.

4

Yeah, the specificity thing is right, but there’s another way to handle this. Instead of battling inline styles with !important, try targeting the widget more specifically or use viewport units. I hit the same issue with embedded widgets last year. What worked way better was min-height instead of fixed height, plus overflow: hidden to kill the scrollbars: css @media only screen and (max-width: 768px) { .booking-inline-widget { min-height: 100vh !important; height: auto !important; overflow: hidden; } } Also check if the widget script adds responsive styles after your CSS loads. Some widgets just steamroll everything with JavaScript. You might need to delay your CSS or use a mutation observer to reapply styles after the widget loads. Viewport height works way better than random pixel values since mobile screens are all over the place.

5

Your inline styles are beating your CSS media queries. That style="height: 650px;" on the div overrides your media query.

Either ditch the inline height or add !important to your media query:

@media only screen and (max-width: 768px) {
    .booking-inline-widget {
        height: 1000px !important;
    }
}

Honestly though, wrestling with widget CSS breakpoints is such a pain. Been there with scheduling widgets that break on mobile.

I switched to automating the whole thing with proper responsive design from scratch. Latenode lets you build custom scheduling flows that adapt to any screen without the CSS specificity headaches.

You can handle bookings, send confirmations, sync calendars - plus you get full control over mobile without fighting third party widget limits.

Takes all the headache out of responsive scheduling: https://latenode.com