Beta survey form question

Hi all.
I finished the beta version survey form:

It passes the test, but I’m wondering about some of the CSS.

My code:
https://codepen.io/cynthiab72/pen/NWyGmaZ

#move-right only does in CSS what I want it if it’s an id.
If I change it to class, then it stops working.
so if I change the css/html to .move-right this does nothing:

#move-right { left: 5.4%; }

Why is that? I haven’t a clue, looked my code over from top to bottom , both in html and css and it’s a mystery to me.

Also, why is it that in certain cases of trying to move an element it will only work if using px, not % .
Why is that?

Thanks :slight_smile:

It’s because id selectors are more important @agate - aka, have a higher specificity. You can lean more about specificity here. You have two selectors (at least) trying to apply styles to that element, .move-right and input[type='radio'] - the input[type='radio'] is superseding the class selector, but not the id selector. Here’s a screen shot of me looking at the dev tools on your page:

The .move-right properties are crossed out because the other ones are more important. If you want to use the class, you need to be more specific - or, you can give a property a super high specificity like this:

Screen Shot 2022-05-16 at 8.50.57 PM

That will override the other properties. Hopefully, this helps.

1 Like

Thank you and off course, I totally forgot about specificity :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.