CODEWITHSUNDEEP
javascripthtmlcsswordpresscalendly
Kourtney Kearney
Kourtney Kearney

Reputation: 101

Add media query to adjust calendly widget css based on screen size

CSS newbie here. I'm trying to eliminate the vertical scroll bar that appears on mobile for a calendly widget.

Widget embed code:

<div class="calendly-inline-widget" data-url="https://calendly.com/lohrandcompany/introduction-meeting-web" style="min-width: 320px; height: 680px;"></div>
<p>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

Formatting looks great in desktop view, but I'd like to eliminate the vertical scroll bar that appears on the page (https://avt.850.myftpupload.com/get-started-now/) in mobile view:

enter image description here

I've tried adding a media query to the custom css section to adjust the widget's height based on device screen size but it doesn't seem to change anything:

@media only screen and (max-width: 780px) {
    .calendly-inline-widget {
        height: 1050px;
    }
}

Please advise!

Upvotes: 0

Views: 2823

Answers (1)

Kourtney Kearney
Kourtney Kearney

Reputation: 101

Aha!

I just had to specify the mobile MIN height:

@media only screen and (max-width: 780px) {
    .calendly-inline-widget {
        min-height: 1050px;
    }
}

That did it!

Upvotes: 1

Related Questions