Alseny• 50
@alseny-diallo
Submitted
. how to adjust the image so that it occupies the full height of the container?
Milos Djordjevic
@milosshomy
All comments
- Milos Djordjevic• 990
@milosshomy
Posted
Hey Alseny, congratulation on solution. You need to set height to 100% on your article tag and on your image. When something is not how you wanted I highly recommend to use developer tool, that way you can find what is missing.
Keep coding! :)
1 - Attrams• 130
@Attrams
Submitted
Hi guys, I had a difficult time implementing the hover effect for the image. After googling I found some code which solved it but I didn't fully understand the code. I will appreciate it if you could explain it to me. code can be found below. Thank You.
// HTML
<div class="image-container"> <img src="images/image-equilibrium.jpg" alt="nft image" class="image-nft"> </div>// CSS .image-container { width: 100%; border-radius: 0.6rem; position: relative; overflow: hidden; cursor: pointer; }
.image-container::after { content: url('images/icon-view.svg'); background: hsla(178, 100%, 50%, 0.5); position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.25s ease; }
.image-container:hover::after { opacity: 1; }
Milos Djordjevic• 990@milosshomy
Posted
Hey Attrams, congratulation on solving this challenge. The code you provided basically says that you are creating another div using pseudo element with the same width and height and giving him a background-color and a content which is a icon and that icon is centered using flexbox. That created div is hided with opacity: 0 and on hover it is set back to be visible. You can find more about pseudo elements here, they are really useful.
https://www.youtube.com/watch?v=zGiirUiWslI&t=25s
Keep coding!
Marked as helpful
0 - David Magalhães• 130
@davidwilliamx
Submitted
I had trouble with the background image in the tag body, the image didn't stay in the center of the page. Comments are welcome!
Milos Djordjevic• 990@milosshomy
Posted
Hey David, congratulation on solution. Your path towards image is wrong you need to use dots to exit css file then go into images file and find desired image, like this. background-image: url(..images/pattern-background-desktop.svg);
Keep coding!
1 @goraindiraja
Submitted
I am still confused about how to set the height of the main image in media queries. if I don't set any heights on the image in the media query, it will be full height so it won't look like as the example shown.
Milos Djordjevic• 990@milosshomy
Posted
Hey Gora, congratulation on solution. This challenge provides two images one for desktop and one for mobile. You can switch images based on screen size.
Keep coding! :)
0- Divakar Bhardwaj• 10
@divakar54
Submitted
are there any ways I can improve the css on this project?
Milos Djordjevic• 990@milosshomy
Posted
Hey Divakar, congratulations on solution. I have few tips for you. You can use display: flex on your .rating-item div, that way the starts and the span will be next to each other like on design. You can translate your .rating-item:nth-child(2) , .rating-item:last-child so they move a little bit to the right like on design.
I hope this helps. Keep coding!
Marked as helpful
0 - Noureddine-20• 130
@Noureddine-20
Submitted
yes, I know that I have many wrongs, so let me know the right path
Milos Djordjevic• 990@milosshomy
Posted
Hello Noureddine , congratulations on this solution. Here are some advices. You can center your .container with a flexbox just set min-height: 100vh to your body. You can apply those background images with a background-image property on body and position them where you want. https://developer.mozilla.org/en-US/docs/Web/CSS/background
I hope this helps you. Keep coding!
Marked as helpful
0 - Itaro18• 210
@Itaro18
Submitted
Feedback will be helpful
Milos Djordjevic• 990@milosshomy
Posted
Hey Itaro, congratulations on finishing this challenge. As I can see your HTML is fine, but you can improve it by using proper tags. For example your <div> with a class of ".deck" could be an <article> and your <p> tag with a class of ".description" could be a <blockquote> tag. https://www.w3schools.com/tags/tag_article.asp https://www.w3schools.com/tags/tag_blockquote.asp
I hope this helps!
Marked as helpful
1 - codinci• 180
@codinci
Submitted
I'd like to receive feedback on explicitly sizing the card. Is this a best practice when it comes to responsive web design?
Milos Djordjevic• 990@milosshomy
Posted
Hey! Good job on completing this challenge. As what I can see from your code , use min-height:100vh; on your container , that way card will be centered properly. And one more thing avoid fixed height unless you really need to do it , instead use min-height , that way it will be responsive. Happy coding!
Marked as helpful
0 - VMH1225• 130
@VMH1225
Submitted
How do I better organize my CSS?
Milos Djordjevic• 990@milosshomy
Posted
Hey, good job on finishing this challenge. Try to avoid fixed height, instead use min-height, that way it will be responsive. Keep coding! :D
Marked as helpful
1 @Galahad-py
Submitted
Couldn't figure out how to change the icon color to white, tried using color, still didnt work.
Also couldn't figure out how to add space in span.....error = >ofjules wyvern>
Milos Djordjevic• 990@milosshomy
Posted
Hey , good job on finishing this challenge. You can use fillter: brigthness(100) to change image color to white and for the space try to not wrap image and text in h4 , wrap it with div and then use image with two spans. Keep coding! :D
Marked as helpful
0- saminstein• 130
@saminstein
Submitted
I couldn't get the older price to stay on the same line as the new price. Also what is the best practice for structuring a card like this?
Milos Djordjevic• 990@milosshomy
Posted
You can use <span> tag instead of <p> tag on prices, that way they will be aligned next to each other. Good job on solution. Keep coding! :D
1 - Arturo Gonzalez• 30
@Arthur-Gnz
Submitted
Could you give me feedback? (Anything is accepted)
Milos Djordjevic• 990@milosshomy
Posted
You can use min-height instead of height on div with a class wrapper. That way the text won't be outside of the wrapper. Good job, keep coding! :D
Marked as helpful
0 - Talha Khalid• 200
@talha-007
Submitted
Let me know what you think.😁
Milos Djordjevic• 990@milosshomy
Posted
Good job, you can use main tag instead of div with a class main and h1 instead of h2. Happy coding !
Marked as helpful
0 - Daniel• 30
@Aflora22
Submitted
There many things that I forgot just by doing this project like how to center a div, It's okay to forgot somethings like that when I still begginer?
I learned a lot with this too, like flexbox that's a bit new for me and box-shadow... I think that my shadow version is not perfect like the default version.
The last question is... Yea I can remember somethings about CSS or HTML but sometimes my mind went blank. My English is not that good but I hope you can understand a bit. :)
Milos Djordjevic• 990@milosshomy
Posted
Hey, congratulations on completing this challenge.
Try to use min-height instead of height, that way it will be responsive.
Happy coding.
1
