Responsive article preview using HTML, CSS, JS

Community feedback

• 

  David Payne•1,205

  @dpayne713Posted almost 4 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

  3

  ---

  

  Arihant Jain•175

  @jarihant701Posted almost 4 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.

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 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)! 😁

  0

  ---

  

  Arihant Jain•175

  @jarihant701Posted almost 4 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?

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 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. ;)

  1