Skip to main content

Making a website on Framer and trying to embed a Calendly popup. It keeps giving me this narrow long size. Not sure how to fix this. Please help, thank you.

Hey @Stephanie27642 

 

Calendly’s embed is responsive, meaning it will adjust its layout based on the width of the element it’s embedded in. When you see the narrow, stacked layout, it typically indicates that the width of the parent element is restricting the embed to display in a “small window” layout.Here’s how to adjust it:

  1. To display the “large window” layout (where the event details and calendar appear side-by-side), make sure the parent container in Framer has a width of at least 1000px. This will give Calendly enough space to switch to the large layout.
  2. Width breakpoints to consider:

Large layout (side-by-side view): 1000px or wider
Medium layout (condensed but not stacked): Between 650px and 999px
Small layout (stacked view): Less than 650pxThe width of the embed is controlled by the embed code.

 

You'll want to look for the width parameter in your embed code generated by Calendly and find the width : 1000px value and change the 1000px (value may be different in your case).Please let me know if this helps or if you need further assistance!


Reply