Trying to get Custom Code to work

Design help Custom code
1

Hello everyone.

Okay I’m probably doing something wrong but I need some direction:

I’m trying to get a button on my page to have different padding for a narrow breakpoint of 992 to 998.

I’ve tried pasting this code in the header, and nothing happened. Then I tried the footer. Nothing. I even tried using !important, and it didn’t work.

@media (min-width: 992px) and (max-width: 998px) { .button.footer { padding: 7px 27px; } }

FYI: I’m using the style tag to enclose the whole thing, but when I pressed enter in this window the tag isn’t showing up.

Can someone tell me what I’m doing wrong?

Thanks,
B.

Here is my site Read-Only: https://preview.webflow.com/preview/mcisaac-music-school?utm_source=mcisaac-music-school&preview=5e9bf99a03545944399415245b2e8bb0
(how to share your site Read-Only link)

2

Site & Page Custom Code fields only work on published sites.

3

Thank you samliew.

So…I’m trying to make sense of that…I have to publish before I can tweak the code? So do I publish, tweak code and unpublish if I’m not finished building the site?

B.

4

If your custom code only consists of only HTML and CSS, you can put it in an Embed Code component and it will take effect in the designer.

<style>
@media (min-width: 992px) and (max-width: 998px) {
  .button.footer { padding: 7px 27px; }
}
</style>

If any custom code is placed in Site & Page Custom Code fields, they will only be visible on any published domain your site can publish to.

5

Okay that’s probably what I want. So where do I place the embed code component?

6

If it’s just CSS, preferably directly under the body, right at the bottom. If you want it to apply on all pages, then put it in the header or footer symbol.

If there is HTML involved, place it where you want it to show up.

7

Thanks - that did the trick!!!