Modify the Calendly widget CSS with a media query to adapt it to different screen sizes

Hey there, I'm new to CSS and I'm struggling with getting rid of the vertical scroll bar that shows up on mobile for a calendly widget.

Here's the embed code for the widget:

<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>

The layout looks good on desktop, but I really want to get rid of that pesky vertical scroll bar that appears on my page () when viewed on mobile:

https://i.sstatic.net/GYGCD.png

I've attempted to add a media query to the custom CSS section in order to adjust the widget's height based on the screen size of the device, but unfortunately, it doesn't seem to be making any difference:

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

If you have any advice or suggestions, please let me know!

javascripthtmlcsswordpresscalendly

Answer №1

Eureka!

Figured it out by setting the minimum height for mobile devices:

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

Problem solved!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this: const products = [ { product: 'prod_aaa', name: 'Starter' }, { product: 'prod_bbb&apos ...

javascripttypescript

Participating in a scheduled Discord Voice chat session

Currently, I am in the process of developing a bot that is designed to automatically join a voice chat at midnight and play a specific song. I have experimented with the following code snippet: // To make use of the discord.js module const Discord = requ ...

javascriptnode.jsdiscord.js

What is the proper way to incorporate an HTML inline tag within a string?

I am trying to incorporate an svg icon that symbolizes the Enter key in my design: <kbd class="DocSearch-Commands-Key"> <svg width="15" height="15" aria-label="Enter key" role="img"> ...

html

The beforeRouteEnter callback function fails to trigger

I'm encountering an issue with my simple routes: /follower/:token/edit and /follower/new Whenever I navigate from the first route to the second one using $router.push('/follower/new'), the beforeRouteEnter hook is triggered, but the callbac ...

javascriptvue.jsvue-router

What is a CSS drop-down menu/container?

I've been brainstorming a unique dropdown menu style that involves dropping down a container, but I'm a bit stuck on how to execute it effectively. Although I've outlined the basic concept, I'm still unsure of the implementation. Any t ...

htmlcssdrop-down-menu

Apply styles specifically to elements that contain a child element

I have a scenario where there are multiple <p> elements with the same class names, but only one of them has a child element. My objective is to highlight only the <p> that contains a child, however, my current code ends up highlighting all of t ...

javascripthtml

Is there a way to transfer a JSON map object from Flask and then utilize it as a JavaScript object?

python server code from flask import Flask, render_template, request import os import sys import json data_raw = [('0', '1', '0', '0'), ('0', '0', '1', '0'), ('1', ...

javascriptpythonjson

Tracking in node.js to detect the creation of a new file

I'm currently working on a node.js script that requires immediate action upon the creation of a file with a specific name in a designated directory. While one way to achieve this could be through continuous calls to fs.readdir until the desired file i ...

javascriptnode.jsfile-iofs

Angular's sanitization script incorrectly modifies the URL value provided in the script src attribute

How can I safely sanitize an external URL to dynamically load a script and remove scripts for a specific component only? Here is the approach I have used: private sanitizeUrl(): SafeResourceUrl { // Value declared in the environment file return ...

javascriptangularangular15angular-dom-sanitizer

Analyze data with diverse structures using crossfiltering technology

Exploring the world of crossfilter is a new adventure for me as I am just starting out and have limited experience with handling data. The data I am working with has a varying structure, as shown below: const data = [ {_id: 001, a: 10, b: 11, c: 12}, ...

javascriptcrossfilter

How to Customize Button Background Color in Bootstrap 5 Navbars

I tried to adjust the background color of a button within a bootstrap navbar, but I couldn't get it to change completely. How can I fix this issue? See below for the code snippet: <div class="container-fluid"> <nav class=" ...

htmlcssbootstrap-5

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...

htmlcss

The background image in CSS fails to display when a relative path is utilized

Currently, I am working on a JavaFX project which has the following file structure (CEP serves as the root directory): CEP +img menu.jpg +src +css_files MainMenu.css The main objective is to set the background image from the img dir ...

cssjavafx

Converting canvas illustrations into HTML files

I am in the process of creating a drawing application that will be able to export into HTML/CSS/JavaScript. I plan to use this tutorial as a foundation for the drawing functionality. My goal is to take all the rectangles within the this.shapes = [] array a ...

javascriptcsshtml

Using Vue.js, you can easily convert a JSON string into a number

I need help sorting a table by both numbers and words obtained from an API. The words sort correctly, but the numbers do not. How can I convert the string values to numbers? Here is the API call I am using: axios.get(`/json/secciones`+ tienda +`.json`) ...

javascriptjsonvue.jsvuejs2axios

Employ AJAX to dynamically refresh the page whenever a new row is inserted into the table

Currently, I am in the midst of learning AJAX because it is necessary for a project I am working on. The aim is to refresh a feed in real-time whenever a new row is added to a MYSQL table. While I have successfully achieved this using node.js, my client&ap ...

phpjavascriptjquerymysqlajax

Is there a way to display one of the divs in sequence each time the page is reloaded?

Is there a way to display the divs sequentially when the page is refreshed? For instance, on the initial load, only div 1 should appear, and with each refresh it should cycle through divs 2, 3, 4, and 5 before starting over. Below is an example I'm c ...

javascripthtmljquery

When trying to inject HTML into AngularJS elements, the data binding may not function

I attempted to reference the documentation but it appears that I may be overlooking something. My goal is to inject HTML that is connected to a JSON object. It functions correctly when the HTML is explicitly declared, however, upon injection and callin ...

javascriptangularjs

Python script for launching a .html file and automating the process of clicking the submit button

I am currently working with a .html file where I need to send a value using a submit button. Here is how the code looks: <HTML> <HEAD> <TITLE>ABC Corporation</TITLE> </HEAD> <BODY> <FORM ACTION="http://192.168.2.2/cg ...

pythonhtmlpython-2.7

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

phpjavascripthtmlajaxupload