Xqu1shy• 270
@Xqu1shy
Submitted
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
@jake4369
All comments
- Jake Samuels• 780
@jake4369
Posted
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 helpful
1 - Josh• 320
@Ao-chi
Submitted
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~
Jake Samuels• 780@jake4369
Posted
This is awesome!!
0 - Harun Korkmaz• 40
@Widded
Submitted
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.
Jake Samuels• 780@jake4369
Posted
Hi, 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 - Rita Tang• 200
@ritatanght
Submitted
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.
Jake Samuels• 780@jake4369
Posted
Hi, 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 helpful
0 - EDOARDO PITACCIO• 180
@EdoPito
Submitted
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!!!
Jake Samuels• 780@jake4369
Posted
Hi, 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 helpful
1 - um1chc5• 210
@um1chc5
Submitted
Always loving feeback from you guys!
Jake Samuels• 780@jake4369
Posted
Looks 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 helpful
0 - Abhinay674• 130
@Abhinay674
Submitted
iam finding difficult with media queries.. i will master them
Jake Samuels• 780@jake4369
Posted
If 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 helpful
0 - Cenk• 90
@cenkderman
Submitted
I think I did a good job, you can report any missing or wrong places.
Jake Samuels• 780@jake4369
Posted
Hi @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 helpful
0 - Abhinay674• 130
@Abhinay674
Submitted
iam finding difficult with media queries.. i will master them
Jake Samuels• 780@jake4369
Posted
Hey! 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 helpful
0 - Angelica• 10
@amch123
Submitted
Please tell me how I can improve and best practices
Jake Samuels• 780@jake4369
Posted
Hi, 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 helpful
0 - AndreiM• 30
@AndrewMoisa
Submitted
Hei ! This it s my second project, what do you think ? what i can do better?
Jake Samuels• 780@jake4369
Posted
This comment was deleted
0 - Dhabiri• 60
@Dhabiri
Submitted
I got more insight into the concept of :focus state and the use of query selector.
Jake Samuels• 780@jake4369
Posted
Looks 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 helpful
0
