HTML Code Widget not working correctly

[hcmediagroup-crypto]

Describe the Problem

I have been given a code from a third party booking system to embed into the website. However, when I do this using the HTML widget it appears on the site different from what the code says.

What it looks like

What it's suppose to look like

Propose a Solution

I would like the code to appear correctly on the website.

Additional Context

No response

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.

[sflwa]

Did they give you CSS as well or just the HTML?
This looks like some missing CSS or that the theme CSS is overriding the widget CSS vs something in Elementor itself

[hcmediagroup-crypto]

Hiya, thank you for your response. No only a HTML code I believe.

These are the instructions they have given me:

[sflwa]

Can you paste the actual code in your response vs a screen capture

[hcmediagroup-crypto]

<style> :root { --ldg-psb-background: #ffffff; --ldg-psb-border-radius: 0.42em; --ldg-psb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1); --ldg-psb-padding: 14px; --ldg-psb-input-background: #ffffff; --ldg-psb-button-border-radius: 0.42em; --ldg-psb-color-primary: #5d192b; --ldg-psb-color-primary-lighter:#ae8c95; --ldg-psb-color-primary-darker: #2f0d16; --ldg-psb-color-primary-contrast: #ffffff; --ldg-semantic-color-primary: #5d192b; --ldg-semantic-color-primary-lighter: #ae8c95; --ldg-semantic-color-primary-darker: #2f0d16; --ldg-semantic-color-primary-contrast: #ffffff; --ldg-component-modal-z-index: 999; } #lodgify-search-bar { width:100%; } </style>

data-dates-check-in-label='Check-in'
data-dates-check-out-label='Check-out'
data-guests-counter-label='Guests'
data-guests-input-singular-label='{{NumberOfGuests}} guest'
data-guests-input-plural-label='{{NumberOfGuests}} guests'
data-location-input-label='Location'
data-search-button-label='Search'
data-dates-input-min-stay-tooltip-text='{"one":"Minimum {minStay} night","other":"Minimum {minStay} nights"}'
data-guests-breakdown-label='Guests'
data-adults-label='{"one":"adult","other":"adults"}'
data-adults-description='Ages {minAge} or above'
data-children-label='{"one":"child","other":"children"}'
data-children-description='Ages {minAge}-{maxAge}'
data-children-not-allowed-label='Not suitable for children'
data-infants-label='{"one":"infant","other":"infants"}'
data-infants-description='Under {maxAge}'
data-infants-not-allowed-label='Not suitable for infants'
data-pets-label='{"one":"pet","other":"pets"}'
data-pets-not-allowed-label='Not allowed'
data-done-label='Done'

data-new-tab="true"
data-version="stable"
data-has-guests-breakdown
data-hide-location

<script src="https://app.lodgify.com/portable-search-bar/stable/renderPortableSearchBar.js" defer></script>

[hcmediagroup-crypto]

@sflwa do you have any ideas?