Submitted over 3 years ago

Responsive article preview using HTML, CSS, JS

Arihant Jain• 175

@jarihant701

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any comment or suggestion is appreciated.

Community feedback

David Payne• 1,205

@dpayne713

Posted over 3 years ago

Hi Arihant -

Looks nice!

I’m viewing on mobile. And when I’m horizontal the share button (when clicked) is expanding to the entire container div height. I’m also not seeing the pop up in horizontal mode.
the pop up in mobile is working and looks nice! It might be nice to have it toggle back off if you click the share button again.
I’d encourage you to look into using a separate style sheet for your projects. As you can see even this small component can take a lot of code so it helps to keep things organized.

Hope this helps Keep it up!

David

Arihant Jain• 175

@jarihant701

Posted over 3 years ago

Thank You for your comment, I guess that share button taking up the whole height problem is happening because that mobile active state is not optimized for screen width larger than 600px😅. I will edit this thing in my edits and also add the toggle for the share button.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hi there, Arihant Jain! 👋

Well done on this challenge! 👍

A few things I'd like to suggest are,

Adding cursor: pointer to the social media popup button and the social media links in the popup.
Using fixed units things like the size of elements and the font-size of the text in the desktop layout so that things don't get too small right before the layout changes from desktop to mobile. 😉

Keep coding (and happy coding, too)! 😁

Arihant Jain• 175

@jarihant701

Posted over 3 years ago

@ApplePieGiraffe Thank you for your suggestion I will keep these in mind but a question if I use a fixed font size won't it become small for bigger screen sizes too? Or that thing is fine?

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@jarihant701

I think as long as you set the font-size of the text to something quite readable (like 14-16px or something), you don't have to worry about users on large screens not being able to read text on your site, since the size of the text usually shows up as the same as on smaller desktop screens and there's usually just extra space in different places on larger screens. You might just have to decrease the font-size very slightly for mobile devices. 😉 Good luck and have fun! 👍

Oh, and hey, if you found these comments helpful, an upvote would be appreciated. ;)

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