@oguzhanakcaSubmitted about 1 year ago
Challenge was easy in general, but when i hover on image, the white eye icon that shows should be brighter. I couldn't find a way for it. Any feedback for it would be good :)
nadezhda-frunza
@nadezhda-frunzaAll comments
- @nadezhda-frunzaPosted about 1 year ago
Hey there, congrats on completing the challenge! :) Regarding your question, you can also try adding a pseudo-class:
.image img:hover::before { opacity: 1; }Hope it helps!
Marked as helpful0 - @MonarchRyuzakiSubmitted about 1 year ago
When I was making this, I noticed that if I made the heading h2, its size was changing when screen size was changed. I changed it to a div and it got fixed. I wonder whats the reason there!?
Your Feedback on this is appreciated
Thank You
@nadezhda-frunzaPosted about 1 year agoCongratulations on completing the challenge, well done!
What is the reason of your issue?
It was likely because you used fixed-size units (px) for the font size. When you use fixed-size units like px, the text does not respond to changes in viewport dimensions or user preferences. This can result in inconsistent font sizes on different screens.
Why <div> fixed this?
When you use a <div>, it's a generic container element without any inherent styling. You can apply CSS styles to a <div> exactly as you want, including setting a specific font size using any unit of your choice (such as rem, em, or %). Headings like <h2> come with default browser styles, so these styles can be different across different browsers.
How to solve this?
So if you want to still use semantic HTML (<h2>), you can switch to relative units like "rem" for font sizes. This will help you to achieve more consistent and responsive design. Also adding min-height: 100vh; to the body is a good practice.
Hope it helps!
1 - @Himanshu-196018Submitted about 1 year ago
Give some review about my CSS. It would help me to improve my styling skills.
@nadezhda-frunzaPosted about 1 year agoNice job! Your CSS is clear and readable, and you've used comments to describe the purpose of different sections, which is great for maintainability. Few recommendations:
- Instead of using the @import method to load Google Fonts in your CSS, you might consider using the newer <link> method in the HTML <head> section to load fonts in a non-blocking manner. This can help improve page loading performance.
- In your media query for screens with a minimum width of 700px, you have specified height: 450 - > you forgot the height property.(px)
- Adding a transition property to the button. This way you can achieve a smoother background-color change.
Congrats on completing the challenge, keep it up!
Marked as helpful0 - @Mahreen-AhmedSubmitted about 1 year ago@nadezhda-frunzaPosted about 1 year ago
Congrats on completing the challenge, nice job! Few things I noticed:
- Consider defining your media queries in a separate section at the end of your CSS/or separate file to make them easier to manage and locate.
- Try to avoid using !important in your CSS as it can make your styles harder to override.
- Would be also nice to add cursor:pointer property and transition to the button.
All in all, your CSS code looks quite well-organized and generally follows good practices!
Marked as helpful0 - @hanifehjanbazSubmitted about 1 year ago
Feedbacks are welcomed.
@nadezhda-frunzaPosted about 1 year agoGreat job! It is interesting how you used <p> element and <span> elements for the prices. Cause they are block and inline elements respectively, but they worked for this challenge perfectly! When I was solving this challenge I created separate div for prices and set it to flex, but now I know it wasn't the right solution.
Also, I know it is a really small detail and is not required for the challenge, but I would suggest to add a transition (like 0.3s) to the button. It will make the color change look smoother.
Marked as helpful0
