Skip to content
OverviewSolutions
6
Comments
4
Reckson Zirsangzela Khiangte
@Saga-sanga

All comments

  • shalash23•280
    @shalash23Submitted about 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
    Reckson Zirsangzela Khiangte•180
    @Saga-sangaPosted about 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
  • Toni•420
    @ToenShSubmitted 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
    Reckson Zirsangzela Khiangte•180
    @Saga-sangaPosted about 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-sainiSubmitted 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
    Reckson Zirsangzela Khiangte•180
    @Saga-sangaPosted 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
  • Reckson Zirsangzela Khiangte•180
    @Saga-sangaPosted 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