Hub setting pop-ups large font. Affecting menu

[Jessh0972]

Really wasn't sure what title to give this issue.

The text which pops up when I try to format or delete items in my Hub layout is really large:

I think the same issue is affecting the main site menu for mobile users:

I have applied a custom font to the site, and set font sizes for headers in the HTML of a text box as below:

<style>
header{
font-size: 60pt;
color: #000000;
}
h1{
font-size: 48pt;
color: #000000;
}
h2{
font-size: 36pt
color: #000000;
}
h3{
font-size: 24pt
color: #000000;
}
h4{
font-size: 16pt
color: #000000;
}
ul{
font-size: 16pt
color: #000000;
}
li{
font-size: 16pt
color: #000000;
}
</style>

Could this be causing the issue? The large pop-ups as I'm editing the sites aren't a huge concern, but the menu links for mobile users really need fixing.

Any help appreciated.

[DataOfficer]

I don't have an answer but could it be related to the recent update?
https://community.esri.com/t5/arcgis-hub-blog/faq-upcoming-changes-to-base-font-size-and-rem/ba-p/10....

[Jessh0972]

I also wondered this. But I haven't used rem anywhere in my site and the two things being affected (delete pop ups and mobile menus) aren't things I know how to access the code or settings for? 

I just checked an old Hub site and that doesn't seem to be having the same issues, even after the update.

[KlaraSchmitt · Accepted solution]

Hello,

Typically, we discourage use of generic CSS selectors in custom CSS as it can have unwanted side-effects on the actual layout application, which also uses headings, ul, and li elements and might be getting caught up in a cascade effect. Ideally, you'd want to wrap any Text Cards with custom styles in a unique class (you can do this in row settings) and then you'd prepend the row class as a unique selector in front of your generic selectors. Maybe you could give that a try on one of your affected sections?

[Jessh0972]

That's the ticket! I was unknowingly making my own life difficult. 

Thanks so much