0

http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form

I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!

coca cola
  • 3
  • 2

4 Answers4

1

Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.

This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.

The image element itself has width and height attributes of 35x35 even though the image is 45x45.

mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • margin is not affecting it's size. – v42 Feb 21 '14 at 23:25
  • @v42: I edited it directly in Chrome developer tools. A margin when combined with overflow: hidden can definitely cut off an image. – mpen Feb 21 '14 at 23:25
  • @v42: ...you're correct. It was one of the other changes I made. Nevertheless... it is something to be aware of in general. Took that bit out of my answer. – mpen Feb 21 '14 at 23:27
  • When I open Inspect Element and remove overflow:hidden from there, I can see the full image, but when I open the template in editor, I can't find overflow:hidden or max-height:36px, so I can't remove them. Anyway, thanks for the answer, @Mark – coca cola Feb 22 '14 at 03:04
  • @cocacola: Toolbar should give you a line number. It looks like some of your CSS is compressed however. You can use a source map or uncompressed CSS for development to get around this. If this isn't an option, search for ".comments .avatar-image-container" in *widget_css_bundle.css". That should help you find the `max-width:36px` bit. Just keep searching for the selectors until you find them all. A CSS beautifier might also help you. – mpen Feb 22 '14 at 05:35
  • @Mark Nah, there's no widget_css_bundle.css either. Doesn't matter.. This is too complicated for me at least. Nothing can help me. But I accepted your answer 'cause I believe it would be useful for people who understand these things better than I do. Once again, thanks – coca cola Feb 23 '14 at 20:07
1

You're restricting the height, that's why it's cutoff.

Comment out the height rules like this: 

#comments-block .avatar-image-container {
  left: -41px;
  width: 48px;
  /* height: 48px; */
  margin-top: 25px;
}

.comments .avatar-image-container {
  float: left;
  /* max-height: 36px; */
  overflow: hidden;
  width: 36px;
}

#comments-block .avatar-image-container {
  /* height: 37px; */
  left: -45px;
  position: absolute;
  width: 37px;
}

Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.

Anid Monsur
  • 4,538
  • 1
  • 17
  • 24
  • The problem is that there is no max-height:36px or height:37px. You can only see it when you click Inspect Element (and when you remove it from there, the image is displayed in full). Thank you for your answer, tho – coca cola Feb 22 '14 at 02:04
1

Remove these three and it should do the trick. I think padding is the main culprit here along with other things.

#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}

1) Remove padding from

2) Remove max-height from .avatar-image-container

3) You're done. Play with settings to get desired results.

enter image description here enter image description here enter image description here

Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
  • I don't know, I'm not the author of this template. Anyway, I removed these three and the image is wider now. Also, bottom border appeared, but the left one is still cut off and image height is too small. – coca cola Feb 21 '14 at 23:54
  • Well, that is because you have set both height and width of image multiple times. In order to maintain the aspect ratio, you just need either height or width whichever suits you. Anyhow I told you what the main culprit was, rest is upto you. Open inspect element or firebug(if using firefox) and start experimenting – Lokesh Suthar Feb 22 '14 at 00:02
  • Also, can you publish the changes? And as far as I know, removing all these affects avatar image greatly. – Lokesh Suthar Feb 22 '14 at 00:06
  • Thank you for your answers, I'll see what I can do – coca cola Feb 22 '14 at 00:23
  • Wait, you were using actual images before now you are using background-image? Why would you use background image on an actual image tag? for background images to work correctly, you need give it's container desired height and then specify `background-size` alongside `background-position` if needed – Lokesh Suthar Feb 22 '14 at 00:28
  • I already tried to add container height, background size and position for background images but it won't work. Nothing changes. It doesn't matter, I'm obviously too dumb for this, haha... Thanks once again – coca cola Feb 22 '14 at 01:02
  • If you want it to work remove the padding from img and remove max-`height:36px` from `.avatar-image-container` – Lokesh Suthar Feb 22 '14 at 01:07
  • Padding is removed, but there is no max-height:36px. Can't find it with ctrl+f – coca cola Feb 22 '14 at 01:14
  • Did you even see the pictures I uploaded? It is there. Check second image. – Lokesh Suthar Feb 22 '14 at 01:15
  • YES. But I can only see it when I click "inspect element". Blogger template editor is not showing that part. – coca cola Feb 22 '14 at 01:28
  • Then the CSS must be adding dynamically. Check the file name in inspect element and find out what's adding it. – Lokesh Suthar Feb 22 '14 at 01:32
  • Unfortunately, I have no idea how to do that. But I really don't wanna bother you anymore. I guess I'll fix it somehow – coca cola Feb 22 '14 at 01:48
  • Just over-ride it with this `.avatar-image-container{max-height:inherit !important;}` Also there is a syntax error in your current css. Put semi-colon after setting it's height and that should do the work. – Lokesh Suthar Feb 22 '14 at 02:14
  • Nope.. max-height:inherit !important; doesn't work. Or I didn't put it in the right place. Here's what I did http://s27.postimg.org/hi16mkjur/image.png – coca cola Feb 22 '14 at 02:58
0

.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.

The image also has height="35" inline, which is not affecting on chrome, but can be removed.

v42
  • 1,415
  • 14
  • 23