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 🦾
Huynh Nguyen
@Nghuynh07
All comments
- Huynh Nguyen• 430
@Nghuynh07
Posted
@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 - Henry Agu• 240
@HenryAgu
Submitted
Please corrections are highly welcomed
Huynh Nguyen• 430@Nghuynh07
Posted
@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
@AdanSaavedra
Submitted
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. ❤️
Huynh Nguyen• 430@Nghuynh07
Posted
@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 - Henrique Dummer• 350
@HenriqueDummer
Submitted
Hello everyone
Here is another chalenge completed!
If you have any tip or advice please leave a coment
Huynh Nguyen• 430@Nghuynh07
Posted
@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
@RJC26
Submitted
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 moremargin: ....lines andpaddingor 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!Huynh Nguyen• 430@Nghuynh07
Posted
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
