To address responsivity, we use media queries to define breakpoints. Webflow has breakpoints already set for you, so it’s just a matter of adding the correct one before your code.
So those CSS rules will only apply when the viewport has a width of less than 991px. (I fixed your code, don’t use the ; character when you only have 1 property in your CSS rule.)
However, I just realised I need more help with the same code.
What if I need different margins for either breakpoints (ipad and the 2 mobile breakpoints)?
Do I need to add the same code 4 times with different max. widths and margins for each breakpoint?
Understand that those values are the ones used by Webflow. You can totally change them, or add extra ones. I advise you to read about CSS Media Queries, there’s a lot you can do with them and at times it will solve your responsivity issues.
Sorry I don’t get that. If you need to show only the first item of a collection list, then just use the Limit in the Settings panel: “Show 1 item start at n”
As for the code, you apply it to the class of the child, not the parent
<style>
.class-of-the-child {display:none}
.class-of-the-child:first-child {display:block} /* block or flex or whatever it is normally set on */
</style>
I would like to my drop caps to have different font sizes on each breakpoint (desktop, tablet, mobile landscape and mobile portrait). I tried adding @media (max-width: 991px) but it does not seem to be working. Could you please have a look at my custom code? What am I doing wrong?