There seems to be an issue on mobile screens that does not occur on computer screens. When the user clicks on the image, it disappears, and when they click another button, it reappears. However, there is a problem with how the image appears - it is cut off halfway the first time and the picture remains even after being removed. How can I resolve this using CSS? Below is my code. Any help would be appreciated. If I remove the position:fixed property for the text below the image, everything works fine, but I need it to stay fixed.
$('#avatar-suggestions-selector').click(function(){
$('.avatar').fadeIn();
$('#img_text').fadeIn();
});
$('#avatar-suggestions-selector_s').click(function(){
$('.avatar').fadeOut();
$('#img_text').fadeOut();
}); img.avatar{
display:none;
position:fixed ;
top: 61px ;
left: 12px ;
width:140px;
}
#img_text{
display:none;
position: fixed;
left: 25px;
background: none repeat scroll 0% 0% #6d9bff;
top: 218px;
color: white;
padding: 8px;
border-radius: 9px;
}