All comments

• 

  shalash23• 280

  @shalash23

  Submitted almost 2 years ago

  I think the main question was how to edit the SVG icons depending on screen size using a media query. I solved it with JavaScript but definitely there is a better way

  

  Advice Generator App

  1

  30

  

  Reckson Zirsangzela Khiangte• 180

  @Saga-sanga

  Posted almost 2 years ago

  Hi Shalash, I've gone through your solution and regarding your question the I would recommend you try using <picture> html element for the SVG. https://www.w3schools.com/tags/tag_picture.asp

  Here's a link to my solution: https://saga-sanga.github.io/advice-generator/

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Toni• 420

  @ToenSh

  Submitted about 2 years ago

  I'd like to know if there's a way to have a transition apply to the arrows on the dropdown menus both when they go up and down (only have it when they go up). Also I couldn't really find a solution to having the background darkened when opening the menu on mobile. Any feedback on that and anything else would be much appreciated!

  

  Intro Section with Dropdown Menu

  2

  70

  

  Reckson Zirsangzela Khiangte• 180

  @Saga-sanga

  Posted almost 2 years ago

  Hi, Toni congratulations on completing the project!

  I've gone through your solution and regarding your question on a dark background my solution was to have a blank div element in the header element. Set it to width: 100vw height:100vh and have a z-index lower than the actual navigation element.

  A link to my solution: https://www.frontendmentor.io/solutions/responsive-landing-page-with-navigation-jhF-XWlOHR

  1
• 

  anshuL.saini• 60

  @kriShnanshu-saini

  Submitted about 2 years ago

  I am unsure with my CSS work. If someone has suggestion do let me know so that I can improve more and be careful for next time.

  

  Product preview card component

  1

  30

  

  Reckson Zirsangzela Khiangte• 180

  @Saga-sanga

  Posted about 2 years ago

  Hi, Anshul. Fist off congratulations on completing the project!

  I've gone through your project and a few pointers I would like to give you are:

  • Instead of using a fixed width in the .container class maybe try using max-width so as to make the card more responsive.
  • Instead of media="(min-width: 1440px)" change the break point to around media="(min-width: 640px)" so that the card adjusts itself only to smaller screens.
  • Also consider changing the font size, padding and margins so as to fit better into smaller screens.

  That is all from me. Thanks and happy coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Sidessh More• 10

  @sidesshmore

  Submitted about 2 years ago

  

  Product Preview Card Component

  3

  30

  

  Reckson Zirsangzela Khiangte• 180

  @Saga-sanga

  Posted about 2 years ago

  Hi Siddesh, congratulations on completing the challenge! 🚀

  Just a few points I've noted in your design:

  • Adjust the line-height of your h1 element so as to reflect the given design better.
  • Use some other tag than <article> for your image section so as to be more semantically correct.
  • The card takes up more than the view height on mobile view. You can fix this by adjusting the padding, font-size and margin of your text content.
  • Maybe utilize a mobile first design strategy next time.

  That's all I have to offer. I hope it helps. Thank you!

  Marked as helpful

  0