Font size and li::marker in Form Snap 4 with Source

Shaking The Habitual
1

Hi @habitualshaker Stuart

I wonder if you can help with a couple of problems I am having in getting Yabdab’s Form Snap 4 to play nicely with Source.

The first is the font size: the whole form is tiny! I presume this is because Source sets 1rem = 10px, 1.6rem = 16px etc. Is there any clever code that, other than ticking the “Use standard rem size” box - which of course makes everything bigger

The second issue is that Source is adding a second circle in front of each option in Radio Input fields. @yabdab say the style is li::marker. I’d really like to keep Form Snap and Source, so if you have a solution to this as well, I’d be grateful.

You can see both these problems if you compare the Source page with the same form in the Blank theme:
Add New | Serenity Flutes Library (Source)
Add New (Blank Theme)

Best wishes

2

hi - i found this in an email that i have given someone before. i can’t properly test / check it as not at my computer. Add it to the page’s CSS box in RW’s code window.

.yd-form ul {
    list-style: none
}

.yd-form li {
    margin-bottom: 0;
    margin-left: 0
    }

.yd-form {
    font-size: 16px
}

.yd-form * {
    font-size: revert
}
3

Thanks for the quick response - that CSS code gets rid of the second circle, but doesn’t address the font size for me. I don’t know that much about css, but it looks as if your code is intended to address the font size issue. Hopefully a solution can be found for that too.

4

Does adapting to the following help any?

.yd-form * {
    font-size: revert !important
}
5

Thanks again - we are getting there! That ‘important’ did the trick, and most of the form is at the expected size (and the second circles have gone).

But have a look - https://library.serenityflutes.uk/add-new/

The sub text on the Human Question, right at the end, is still tiny, and if I am being picky, the Placeholder text is smaller than expected (although it is readable).

Thanks for your ongoing help.

F

6

Hi @fergus

this should fix those bits:

.yd-subtext {font-size: 12px !important}
.yd-form input {font-size: 15px !important}
7

Thanks. I’ll try them.

For my education, how did you know what these bits were called?

8

subtext is still tiny. Everything else working well. Thanks again.

1 Like