@Xqu1shySubmitted over 1 year ago
Having a hard time figuring out how to make the modal 100% in height(it leaves a tiny gap in the bottom) any fix for it? or is there a better way
Any tips for grid. Thank you!!
Jake Samuels
@jake4369All comments
- @jake4369Posted over 1 year ago
Hi, site looks great you've done a really good job!! As for the modal, you could try adding min-height: 100vh; here #nav-modal { margin-left: auto; height: 100%; width: 70%; padding: 1.5em; background-color: white; border: none; position: fixed; } This property will ensure that the height matches the height of the screen and you won't have the gap.
Marked as helpful1 - @Ao-chiSubmitted almost 2 years ago
Yahallo~
I tried using create react app for this card component project. I react js would be overwhelming for me to jump right into without a deep knowledge of javascript, but create react app help me with that negative thought. I find learning react fun and I know this is a very known JS library.
One thing that I was not able to achieve as a challenge to my self is an animated border effects. The one I added is pretty lame. But I will try and learn how to make one!
If there's anything you could give as an advice and tips from a react beginner I would gladly appreciate it! Thanks~
- @WiddedSubmitted almost 2 years ago
I wouldn't say I coded professionally. Many codes may be unnecessary, but you can use them as you wish.
If you want to see mobile design, set device's px to 375.
@jake4369Posted almost 2 years agoHi, you solution looks great congratulations!
One way to handle responsive images that change is to use the <picture></picture> tag instead of using background images. You can specify multiple images and media queries inside the picture tag, and the images will respond and change whenever you resize the browser window. Using means you don't have to set the display to none/block on the images you don't need at certain sizes.
Check out w3Schools if you'd like to learn more about how to use the picture tag, it's really easy to use once you've had a bit of practice with, you'll begin to use it over and over again doing the challenges of Frontend Mentor so it's a great tool. to have.
Here's the link:
https://www.w3schools.com/tags/tag_picture.asp
I hope you find this useful, happy coding ☺️
0 - @ritatanghtSubmitted almost 2 years ago
Not sure if this is the correct way (set as background-image) to fit an image in a grid that would resize according to the size of the grid. I am also wondering whether a similar result could be achieved using an image tag in the HTML. I've tried with styles like {width: 100%; height: auto} or the reverse, but the image scales down too much when the width of the screen shrinks leaving blank space at the bottom.
@jake4369Posted almost 2 years agoHi, you solution looks great congratulations!
One way to handle responsive images that change is to use the <picture></picture> tag instead of using background images. You can specify multiple images and media queries inside the picture tag, and the images will respond and change whenever you resize the browser window. It's a great alternative to using background images.
Check out w3Schools if you'd like to learn more about how to use the picture tag, it's really easy to use once you've had a bit of practice with, you'll begin to use it over and over again doing the challenges of Frontend Mentor so it's a great tool. to have.
Here's the link:
https://www.w3schools.com/tags/tag_picture.asp
I hope you find this useful, happy coding ☺️
Marked as helpful0 - @EdoPitoSubmitted almost 2 years ago
Could not round some of the corners, is it because the image is actually a background image that has no repeat and only covers 50% of the card?
Any other feedback is welcome!!!
@jake4369Posted almost 2 years agoHi, a great idea for responsive images is to use the <picture></picture> tag. You can specify multiple images inside one tag, set media queries inside the tag, and when you resize the browser, the correct image will render it's a really cool.
w3Schools has some good information on how to use it, just be sure to set your images to "display: block" in the CSS else you get some weird behaviour but other than it's a great way to handle multiple images like in this challenge.
https://www.w3schools.com/tags/tag_picture.asp
Hope this helps ☺️
Marked as helpful1 - @um1chc5Submitted almost 2 years ago
Always loving feeback from you guys!
@jake4369Posted almost 2 years agoLooks great congratulations!
A few things I'd add are cursor:pointer in the CSS for your clickable items like the ratings and definitely on the submit button. Also, I liked using radio input's for the ratings on this challenge, the properties available on radio input's make things a lot easier. I'll leave a great resource if you'd like to explore their use and how to customize them,.
https://markheath.net/post/customize-radio-button-css
Hope this helps ☺️
Marked as helpful0 - @Abhinay674Submitted about 2 years ago
iam finding difficult with media queries.. i will master them
@jake4369Posted about 2 years agoIf you push the new code to Github again and redeploy the site you can just generate a new screenshot and your solution should be up-to-date then.
Marked as helpful0 - @cenkdermanSubmitted about 2 years ago
I think I did a good job, you can report any missing or wrong places.
@jake4369Posted about 2 years agoHi @cenkderman, it's a really good looking solution, congratulations on completing it.
One thing I did notice was that you forgot text-transform: uppercase; on the h1 elements and a transition on hover on the buttons would be a nice touch too. If you're not sure how to do this you can check out w3shools tutorial in the link below.
https://www.w3schools.com/HOWTO/howto_css_transition_hover.asp
Other than those minor little things, it's nice easy code to read so well done on that!
Keep coming with the awesome solutions 😎!
Marked as helpful0 - @Abhinay674Submitted about 2 years ago
iam finding difficult with media queries.. i will master them
@jake4369Posted about 2 years agoHey! Awesome attempt. I found a really good short video on media queries on Scrimba
https://scrimba.com/scrim/cast-1595
Hopefully this show help you master them!
Good luck ☺️
Marked as helpful0 - @amch123Submitted about 2 years ago
Please tell me how I can improve and best practices
@jake4369Posted about 2 years agoHi, your solution is pretty spot on, it looks really good and very close to the design.
I only have a few suggestions but of instead of using <div class="contenedor">, you can use a <main></main> tag, this should remove the warning "All page content should be contained by landmarks". Also, there is no need to wrap every element in <div></div> tags. Other than that it's a pretty nice, clean solution, great job!!
Marked as helpful0 - @AndrewMoisaSubmitted about 2 years ago
Hei ! This it s my second project, what do you think ? what i can do better?
- @DhabiriSubmitted about 2 years ago
I got more insight into the concept of :focus state and the use of query selector.
@jake4369Posted about 2 years agoLooks awesome, you might want to try using radio buttons instead of list items for your ratings though. The site below really helped me with this challenge. Keep up the good work!!
https://markheath.net/post/customize-radio-button-css
Marked as helpful0
