How to show icon only on small screens?

Question

css

I understand how noob the question is. There is the usual little "call us" icon. It should be visible only on small screens.

Answer 1

Animation is not needed here + you set the background image only for the :checked state. Accordingly, if it is not there, then the background image is instantly removed, because this is not an animated property in principle (background-image). You need to initially set all the styles, then use the animated properties (opacity, transform).

Answer 2

var b=document.getElementById("myimg2");
 
function onMouseIconComm(){
    this.src="img/close_2.png";
}
 
function outMouseIconComm(){
   this.src = "img/close_3.png";
}
 
b.onmouseover=onMouseIconComm;
b.onmouseout=outMouseIconComm;

Answer 3

@media only screen and (min-width:1000px){
        #ikonka{
            display:none;
        }
    }

Answer 4

Use media-queries .