HTML embed styling issues

Design help Custom code
1

Hi all,

I am using the HTML embed to showcase a third party widget (@Workable). Without CSS stying this views fine as you can see from my links below. But as soon as I add it affects the rest of the page and I totally lose the footer as well as causing some issues with the navigation bar.

Is there a way around this? I am new to custom code so it could be something simple but I’ve been trying now for a good couple of days so it’s time to get the pro’s involved :slight_smile:

Thanks in advance, I’ve attached some images of the code and some links to both examples.

I look forward to hearing your thoughts/fixes.

Regards,
Jono

Here is my site Read-Only:
[1]: Webflow - Agile Analog

Screenshot 2021-08-17 at 13.22.56
Screenshot 2021-08-17 at 13.22.56793×633 55.6 KB

Screenshot 2021-08-17 at 13.22.30
Screenshot 2021-08-17 at 13.22.30793×630 43.9 KB

2

The first rule in your style block is incomplete. You need to specify an element. As for the rest of the rules they are too general from a CSS specificity perspective. You need to limit the scope. Assuming that the HTML written by the script is contained within the DIV with the ID of “whr_embed_hook” you could write your styles with the ID as part of the selector.

#whr_embed_hook a {
    background: #ffffff;
    font-family: "open sans";
}
#whr_embed_hook h1 {
    color: #ffffff;
}

Or if you inspect the rendered HTML you will see that each element has a class applied to it. You can either include the class in your styles block or create a element with the same class(s) in the designer and style it.

Normally when working with generated HTML one uses the browser’s dev tools to view and handle styling. Then copy the results to your code block.

If this is all too much you could secure some freelance help. If you know what it should look like it should only take a handful of minutes to write the code.

3

Thank you for your help @webdev :slight_smile: