Submitted almost 3 years ago

Article preview component with HTML, CSS and JS

Cristina• 360

@cr1deg0

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi,

Another interesting challenge. I'm happy with the result and I've learned to change styles with active states. My mobile solution works well in my browser with developer settings for iPhone, however I've noticed that when I look at the site on my iPhone the share button does not return to the original pale colour once the social menu has been deactivated. Can anyone point out what the issue could be? Thanks, Cristina

Community feedback

bunee• 2,060

@buneeIsSlo

Posted almost 3 years ago

Hey! @cr1deg0, Great job on this challenge, The page looks pixel-perfect. To answer your question... I reckon the share button does return back to its original colour but, It's the hover style of the button that stays applied. You can test this by changing the hover style of the button to a different colour. Here's an article I found that should help clear things up :)

Marked as helpful

Cristina• 360

@cr1deg0

Posted almost 3 years ago

@buneeIsSlo Thanks for the link to the article! It's something clearly to consider moving forward!!

Dmytro• 305

@DmytroTarasiuk

Posted almost 3 years ago

Hi Cristina, You did an amazing job I really like it. Your solution looks very good on a laptop and mobile. However, it is not a fully responsive as on the wide 376 - 620px some components of your card are out of a page. In addition, it's better to use 'rem', 'em', 'vw', 'vh', '%' units instead of px for media-queries to avoid of re-writing unnecessary code. That's all I've noticed.

Have a fun coding. Cheers ;)

eagermonument81• 210

@ixtk

Posted almost 3 years ago

@DmytroTarasiuk Hey, I want to take this challenge but the share tooltip will surely make the component not very responsive in some sizes. Should I move the tooltip to the left so it's contained inside the component?

Dmytro• 305

@DmytroTarasiuk

Posted almost 3 years ago

@Ikhcamot sure. You can position it absolute and once the share button clicked the tooltip will cover 100% width of its container. Don’t forget to add a specific class to toggle share button. Good luck ;)

Cristina• 360

@cr1deg0

Posted almost 3 years ago

@DmytroTarasiuk Thanks for the feedback. I'm getting my head around 'rem', 'em', 'vw', etc for the next challenges. Do you have any suggestion on how to make the social media share box responsive with my current solution? At the moment it's positioned absolute with respect to the card, can I make it move with the viewport when the reference is not changing?

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord