Auto resizing width in html

Marketing & Content Hub Blog, Website & Page Publishing
1

I am inserting a calender for our booking supplier with the below code into a rich text module. Everytime i try and change the width to auto or 100% for it to reduce in size automatically when opened on a phone it defaults back to 560

can anyone advise how to work around this please

<iframe style=“margin: 0px auto; display: block;” xml=“lang” src=“http://bookings.gemapark.co.uk/widgets/PricingCalendar.aspx?cid=231&pid=6662&uid=6669&pcsd=today&pcld=endofyear%20%2b1y&pced=tomorrow&pce=slide&pcpp=processPrice” width=“560” height=“700”></iframe>

2

Hi @PThwaites,

I would suggest trying to add some additional inline styling.

 <iframe
 class="booking-frame"
 src="http://bookings.gemapark.co.uk/widgets/PricingCalendar.aspx?cid=231&pid=6662&uid=6669&pc..."
 width="100%" 
 height="700"
 style="width:100% !important; max-width:560px; border:0; margin:0 auto; display:block;">
</iframe>

You may not want the max-width, but it’s there just in case. The style will overwrite the width set in the iframe.
If the rich text module continues to remove the style, you may have to take a different approach. Ideally, a custom HTML module would be best, but that won’t be possible on Free.

There are other options, such as adding CSS references in a CSS sheet or in the template, if needed.

Hopefully, this helps!

3

Hi Josh

Thanks for your help it is still resetting the widths to a fixed value. I am pretty sure i will be upgrading once i was happy with everything and this is the only stumbling block i have found, so will upgrade when i have built all my pages and work on the calenders after.

Paul

4

Hi @PThwaites

The most effective way to make your iframe responsive within a HubSpot rich text module is by using inline styling with width: 100% !important; and max-width. (like Josh mentioned)
Why HubSpot does this:
HubSpot’s rich text editor often sanitizes HTML and applies default styling to maintain layout consistency and prevent users from inadvertently breaking page designs. A fixed width like 560px is a common default for embedded content to fit within typical content columns.
If the Rich Text Module Still Reverts
While the !important inline style is usually effective, if the rich text module continues to strip or override your styles, then try the below.

  • Custom HTML Module (Recommended if available): If your HubSpot account allows for custom modules, this is the most robust solution. Custom HTML modules give you full control over the code without the rich text editor’s interference. You would paste the exact iframe code (as provided above) into the custom module’s HTML/HubL field.
  • Custom CSS (Requires theme or page access): You can add custom CSS to your HubSpot page or theme. This involves adding the iframe with a class (like booking-frame in the example), then defining the styling in your CSS file: