@Alex-Archer-I
Posted
Hi!
To fix your issue you can change display property of the image to block. This happens cos img tag have a default block: inline and browsers create spare line for inline elements (cos most inline elements is a texts).
But I suggest you not use div wrapper here at all. You can style image directly. That could be said about the other elements as well =) This layout require only one wrapper - the author part where the avatar and name could be inside the flexbox.
Also I can see, that you omitted hover effects. If you are not familiar with it yet, you'll see that it's quite easy. You just need to write css selector for hover pseudo-class and styles you want to be applied under this effect.
.text:hover {
color: blue;
}
Sure, if you just decided to skip it for some reasons than newer mind =)
Hope that could help =)
Marked as helpful
@henryapm
Posted
Hey @Alex-Archer-I Thank you so much for taking the time in checking out my solution, I'm definitely gonna try the Block suggestion, I didn't think of that, CSS come with so many things that anybody can easily be ignorant of them.
And in regard of the hover effect, I didn't know we were supposed to do it, hahaha how do you check the actual design where you see the hover effect, I checked the README, and the style guide and didn't find out anything about the hover effect. at least not when I first checked it out.
By the way nice to meet you, how long have you been doing frontendmentor.io ?
@Alex-Archer-I
Posted
@henryapm
Nice to meet you too, I'm here about a month, but I'm already studding web dev a bit longer =)
You can find image with all necessary effects in the design folder. It's name active-states.
Marked as helpful
@henryapm
Posted
Hey again @Alex-Archer-I what are you studying specifically? or what have you studied? and yes I found it, I was able to apply some of the changes but no luck at deploying the hover effect in github pages, I have it working locally but not online.
@Alex-Archer-I
Posted
@henryapm
Oh, I'm self-taught so I'm learning form here to here =) Mostly frontend, but a bit of backend too - I decided to learn how to create simple servers to test fetch api and stuff. And for better understanding web processes in general.
What is an issue in the git pages? Maybe, you push wrong version here?
Marked as helpful
@henryapm
Posted
Hi @Alex-Archer-I It might be that, but is weird because I run the app in my local server and the hover effect works fine and I pushed the same thing twice, the code is even updated with the hover effect on Github but it still doesn't work.
And really? I'm self taught as well, I decided to give a shot to Frontend mentor and paid for the monthly subscription to see how much can I get out of it! If you wish to connect let me know in my Linkedin: https://www.linkedin.com/in/henryapm/
@Alex-Archer-I
Posted
@henryapm
Hm, it's strange. Alas, I cant see your github page repo to tell what's the reason of this. It looks like it wasn't updated for last three days.
Sorry, I haven't a linkedin account, but you can reach me via discord - archerthecat0851
@henryapm
Posted
Really? @Alex-Archer-I, That's strange, I've worked on it the last couple days as well, that's worrisome
https://github.com/henryapm/blog-preview-card-main
That's the link of my solution on Git hub, let me know if it worked
@Alex-Archer-I
Posted
@henryapm
Yeah, but I told about your github page repo - https://github.com/henryapm/henryapm.github.io
Are you using some different way to upload files into live site?
@henryapm
Posted
Hey @Alex-Archer-I no I'm uploading through the command line pushing changes to it.
@Alex-Archer-I
Posted
@henryapm
Sure, I asked about how your project ended up displayed on the page.
I mean, I have to push folders with projects directly into my GithubPage repo. I see on your repo that there is another way, but I can't figure out which one =)
