Skip to content
OverviewSolutions
19
Comments
5
Huynh Nguyen
@Nghuynh07

All comments

  • Hana•960
    @Hanka8Submitted over 2 years ago

    Hi FM community,

    I dont understand why my z-index doesnt work on .mobile__content__answer. Other things seem ok for me. Any suggestions welcome 🦾

    Responsive page using pure CSS

    2
    Huynh Nguyen•430
    @Nghuynh07Posted over 2 years ago

    @Hanka8 Hello great job on the solution. Z-index itself doensn't do anything unless you add a position other than static to it. Most of the time relative is used if you just need to overlap another element. Try to see if it works. Cheers to an awesome challenge completed. Algorithm for CSS grid includes z-index so if you use grid, you dont need to include a position. That is to say if you display is grid you dont need to set the element to any position. It would just work right out of the box for grid. See below for a quick read on z-index:

    https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    Marked as helpful
    0
  • Huynh Nguyen•430
    @Nghuynh07Posted over 2 years ago

    @HenryAgu First, great job on completing with the challenge. Keep up with the awesomeness. My only suggestion is avoid using fixed width. The web alone w/o css is responsive. By putting a fixed size on a container or an elements we're limiting to be responsive. I see this in your code:

    main{ width: 50%; margin-left: auto; //margin: auto; will also do the trick here margin-right: auto; }

    By setting a fixed width, the contents overflow. Responsive design uses max/min-width/height. Check out link below for a free 21 days course where kevin teaches you all you need to know about responsive design.

    I hope this help. Have a good day

    https://courses.kevinpowell.co/conquering-responsive-layouts

    Marked as helpful
    0
  • Adan Saavedra•250
    @AdanSaavedraSubmitted over 2 years ago

    Hey I hope you all are okay, I would love if some one could explain me how I put the "you selected n out of 5" with the choice of the user, also y would like to receive suggestions or feedbacks in how to improve my solution in all aspects. ❤️

    Interactive rating component

    2
    Huynh Nguyen•430
    @Nghuynh07Posted over 2 years ago

    @AdanSaavedra

    Very nice job on the challenge. It looks good. To select the star, a solution to it would be to interact with the DOM. I see that your approach is using type="radio" with id #. Maybe you can select all the input then loop thru it and also check if the input id is 1-5, if it is then the message will show the star clicked. I included a link below for DOM manipulation. I highly recommend it.

    DOM manipulation: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

    Your CSS looks good. I would avoid using fixed width. For responsive layout it is better to avoid it. https://www.w3schools.com/html/html_responsive.asp is a good starting point

    I hope this helps. Cheers to a good challenge completed.

    Marked as helpful
    0
  • Huynh Nguyen•430
    @Nghuynh07Posted over 2 years ago

    @HenriqueDummer

    Hey I like your solution with the leader_container. It overlaps as you resize the viewport. That's really cool.

    I have one suggestion for the footer links. Right now, even if I hover outside of the links, the hover effective still works. Is this your intention? I think setting the parent element which is .footer_links ul to align-items: center; will solve this.

    I hope this help.

    1
  • Ryan•290
    @RJC26Submitted over 2 years ago

    This is my attempt at the Fylo Landing page. I need some advice as to positioning content on the page, I feel like i'm missing something, I am currently possitioning content by using margin: .... to push items where I need and this works fine for mobile or desktop by it's self but I find after I add media queries to make it responsive I find I have to add even more margin: .... lines and padding or even adding minus margins which feels very counter productive. Any advice as to topics or video suggestions to help me figure out better positioning methods would be awesome, and any advice on my code or ways i could simplify it would be awesome. Thanks!

    Fylo Landing Page

    1
    Huynh Nguyen•430
    @Nghuynh07Posted over 2 years ago

    Hey @RJC26

    Very nice job on completing the project. Here are my suggestions:

    For section_1: Set object_fit: cover; on the img_1 class. This ensure that the aspect ratio of the images remains the same within its container as it shrinks or expand. Here is https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for extra information.

    For section_2: Try putting width to 100% instead of 65% for card class. You might need to adjust the media queries at about 796px. Right now your media queries is at 799px max-width for section_2. I would maybe do it even before that because the text_2 looks kind cramp.

    I played around with it a little bit. I hope this help. Over it looks good. Very nice job.

    Marked as helpful
    1