Need help with CSS code

Hi
For Google's core web vitals, we are adding placeholders for ads to minimize the layout shift. We have implemented this on our site. We are not showing ads on mobile devices but these placeholders are still visible on mobile. We are hiding placeholders for mobile with the below script but wanted to confirm if the CSS is correct as it's different from the other CSS entries in our additional css file. e.g starting with @ instead of dot. Our site also went down when we tried to implement this (not sure if cache got cleared at the same time when we updated the CSS).

@media screen and (max-width: 767px) {
#softwaretestinghelp_right_atf {
display: none;
}
#softwaretestinghelp_right_btf {
display: none;
}
#softwaretestinghelp_medrec_right_btf {
display: none;
}
}