How to modify the dimensions of this image with css?

Question

I have a problem with an image on my website and want to get rid of it by modifying the dimensions of it to 1px height and 1px width.

I am trying to do it with css but I have a problem selecting the image because the class of it has empty spaces (class="avatar avatar-96 photo tie-appear"). This is the code of the image when I inspect it:

<span class="dwqa-date"> <img alt="" src="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&amp;d=mm&amp;r=g" srcset="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&amp;d=mm&amp;r=g 2x" class="avatar avatar-96 photo tie-appear" height="96" width="96"> <strong>⋅</strong> <a href="#comment-2" title="Link to comment #2">22 mins ago</a> </span>

Do you know how I can get rid of this image? If you know the code you make me a great favor.

Thanks!!

Answer 1

Your CSS class does not have spaces, each of those is its own CSS class

class="avatar avatar-96 photo tie-appear" can be selected with the css selector .avatar.avatar-96.photo.tie-appear

See this duplicate question: How to select classes with spaces

Edit: I have it set up on this JS Fiddle for you: https://jsfiddle.net/y3s2869g/ You can see the CSS selector is removing the image by setting the display to none. Hope that helps!

Edit again: After reviewing the markup on the site, you can remove the avatar images with the following CSS:

.dwqa-author > img.avatar, .dwqa-comment-author img.avatar {
    display:none;
}

You might also want to remove some of the extra padding, CSS similar to this will accomplish that:

li.dwqa-comment {
    padding: 15px 20px !important;
}

.dwqa-header div.dwqa-author {
    padding-left: 0px !important;
}

.div.dwqa-content {
    margin-left: 0px !important;
}

Answer 2

Display: None

Is your friend. Changing the picture dimensions will still push the other stuff around and make it very ugly on low-resolution-screens.