Submitted about 4 years ago

CSS, HTML, Responsive Mobile and Desktop

@quocbao19982009

A solution to the Stats preview card component challenge

Solution retrospective

Hi, this is my first project on CSS and HTML as a web development beginner. Any feedback would be nice, Thank you. My problem during the project is the Unit, in order to get a responsive website I use units such as Percentage (%), vh, and vw. However, sometimes they do not give the outcome that I wish. Also, there is a lot of confusion regarding Max and Min (hight, width) use in CSS, is there any tips or document that you can recommend it would be very appreciated.

Code

Please log in to post a comment

Community feedback

hao pham•745
@jerry-the-kid
Posted about 4 years ago
Nhìn tên có vẻ Việt Nam mà để Finland cũng ko biết tôi nên nói tiếng gì :)

Ở 1000px -> 900px width là của ông bị vỡ là card nó bị quá width.
1. 1000px -> 900px screen card oveflow Solution: @media (min-width: 798px) .card-content {width: 50%}
1. 900px -> 800px screen data overflow : Solution : (ugly but fixed :V. Or you can decrease all font-size of card at 900px). @media (min-width: 798px) .data { flex-wrap: wrap;}
1. 900px -> 800px picture not 100% height : You should set background-img instead of <img>
Marked as helpful
Adam.Codes•180
@AdamCodes42
Posted about 4 years ago
Hey, See if you want to make your website responsive try learning how max/min-width and max/min-height works it would be great and also maintain less code in your media query Example:-

img{ width:500px; min-width:450px}

So the img size won't be smaller then 450px
- Arrange your css properly
- I am also a beginner but as you complete your challenges you will get more improvement
Happy coding 🙌🙂
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord