1

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!!

david
  • 15
  • 4
  • 1
    Please add the relevant HTML & CSS with your question, this makes it a lot easier for us to see **what you have tried** and also **what we are to work with** – Mike Donkers Nov 19 '15 at 18:35
  • you can add a style `height:1px;width:1px;` for either the class `avatar` or `avatar-96` or `photo` or `tie-appear` depending upon your situation. – Lal Nov 19 '15 at 18:37

2 Answers2

0

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;
}
Community
  • 1
  • 1
Adam Konieska
  • 2,805
  • 3
  • 14
  • 27
  • image.avatar.avatar-96_photo.tie-appear { height: 1px; width: 1px; } – david Nov 19 '15 at 18:41
  • image.avatar.avatar-96.photo.tie-appear { height: 1px; width: 1px; } – david Nov 19 '15 at 18:42
  • 1
    @david a better way to remove it would be to set the display to none. I've done that in this JS fiddle, you can see it working at: https://jsfiddle.net/y3s2869g/ – Adam Konieska Nov 19 '15 at 18:44
  • Thank you a lot for the help! Unfortunately I have tried all the different options and it is not working. The issue is because of a plugin called "DW Question Answer". Is it possible that the new css code is not working because of this plugin? ... I am not very good with this technical stuff, the plugin don't have support and I don't know where the problem may be. I appreciate any help. Thanks! – david Nov 19 '15 at 22:17
  • This is the link to the page just in case: [http://vacentre.com/question/this-is-another-test/](http://vacentre.com/question/this-is-another-test/) – david Nov 19 '15 at 22:20
  • If you scroll down you see the issue with the gravatar pictures. They are 96px per 96px, while they should be 32 px per 32 px. Moreover there are some other gravatar images with the right dimensions behind those big images. This is odd! – david Nov 19 '15 at 22:25
  • Agreed @david, theres a lot of different gravatar images with classes for different sizes thats throwing it off. Let me take a look at the page for a minute and I'll adjust my answer. Hang on! :-) – Adam Konieska Nov 19 '15 at 22:27
  • @david, I've edited the answer, the CSS I used works when I test it in the console in chrome, give that a try! – Adam Konieska Nov 19 '15 at 22:40
  • It did work! Thanks a lot Adam!! Now there are no gravatars and everything looks nice! :) – david Nov 19 '15 at 23:54
  • Glad to hear it @david! If that worked for you please accept the answer. – Adam Konieska Nov 20 '15 at 14:37
0
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.

TheLexoPlexx
  • 117
  • 13
  • Thanks for the comment! The problem is that the image is over other elements so I think that if it disappears the problem will be gone. But I am not there yet. I was not able to produce any changes on the page. – david Nov 19 '15 at 22:19