I am very new Shopify and trying to build out my website using the Horizon theme. I am using the BTA booking app on one of my pages (calendar widget embed). I added the block to section, but the calendar is displaying much too small. BTA says it is a Shopify issue. This is super frustrating as I am sure it is an easy fix for some, just not me. Any recommendations on how to proceed?
It is how the Horizon theme sizes things.
Horizon sizes each block to its own content width. BTA’s calendar has no fixed width, so it falls back to about 300px and sits squashed on the left of the page.
I built a fix and tested on a Horizon store:
Steps:
- Go to Online Store > Themes and click Customize on Horizon.
- Open the page that has the calendar.
- In the section holding the Event Calendar block, click Add block, then Custom Liquid.
- Paste the code below into the Liquid code box.
- Click Save.
<style>
.bta-calendar-widget-container { width: 100% !important; }
.shopify-app-block:has(.bta-calendar-widget-container) { width: 100% !important; }
</style>
The calendar then fills the full width of the section, on desktop and mobile.
Thank you so very much. You are a lifesaver.
if it works, please mark the above as Solution.
Hi @Etch_Workz
If you’re using the Horizon theme, try these steps:
- Go to Online Store → Themes → Customize.
- Open the page where you want to display the calendar.
- Click Add section (or Add block, depending on where you want it).
- Select the Custom Liquid block.
- Copy the calendar widget embed code from the BTA Booking app and paste it into the Custom Liquid block.
- Save the changes and preview the page.
If the calendar is still displaying too small, it’s likely that either the parent container in the theme is limiting the width or the app’s embed isn’t fully responsive. In that case, inspect the element with your browser’s developer tools or contact the app developer to verify that their widget supports responsive layouts.
If it’s still not working, send me your Collaborator Code. I’ll check the issue on your store and provide a proper fix.
Best regards,
Devcoder 
Works beautifully. I marked as a Solution. I appreciate your help 100%!
Thanks all. I appreciate the help. Ajaycodewiz’ solution works perfectly. Because I am using the Horizon theme, BTA will only allow me to use the app block. I could not add by way of Custom HTML block. It is definitely an issue with the Horizon theme sizing the embedded widget too small. I had the BTA widget set to Full-Width but still showing small on page. Thanks again. I hope this helps someone down the line.