Casper/Lyra Avatar Style Glitch

It’s a tiny thing.

In Casper and Lyra, this CSS needs to be corrected in order to prevent the 30px Avatar from being chopped off on the left when its post is aligned at the very left side of the index loop…

.static-avatar, a.author-avatar {
    margin-left: -4px;
}

Before…

After…

2 Likes

Interesting. Im amazed at the level of detail you put in order to notice this.

Keep it up!

Thanks @gregpozo I can’t help myself. (It’s both a gift and a curse.) I actually noticed it many months ago and tidied up my own sites. Just forgot until now to post it to the community!

1 Like

That’s amazing! Helps the community in a lot of ways! :slight_smile:

@denvergeeks thanks for noticing this! If you have a clear reproducible steps feel free to open up a PR in these two repos with the changes and we’ll try to get them merged soon :slight_smile:

Thanks naz will do! Merging sounds good! (What is a PR and what are these two repos?)

@denvergeeks PR - Pull Request (on GitHub) and by repos I mean the Lyra and Casper repositories :slight_smile: Let me know if you need any further help with this!

Uhh… errrr… I definitely need help with this if it is the prescribed procedure… I can only barely do command line. Please let me know if there is a more simple way…

Or… I’m willing to try whatever… and learn…

@denvergeeks I believe you can edit CSS files in place on GitHub but in case of CSS edits you’d need to recompile the CSS output. I think, but didn’t check much, that you’d want to change this bit - https://github.com/TryGhost/Lyra/blob/master/assets/css/screen.css#L846-L848.

Maybe the best way forward would be if you could open a detailed issue in Casper&Lyra repositories with step-by-step guide on how to reproduce this (definitely include the images from above). I’m sure somebody from the community would be happy to pick it up and do the full change for you :wink:

Sound do-able. Thank you for the info!

If you’d like to up your “technical sophistication” a bittle lit, I’ll highly recommend the following extended tutorials by Michael Hartl at LearnEnough.com (look for the SCHOLARSHIP link in the footer if you cannot afford or simply don’t want to pay):

1 Like

Well how kind of you @georgeappiah! I’ll take a peek…