Responsive Stats Preview Card Component with HTML and CSS
Design comparison
Solution retrospective
I struggled with responsive design and even though it works for now I am not really sure if it is correct and need to some solid advice with handling images in responsive design. Media queries are not my cup of tea and so is working with images. I used the same desktop image for mobile responsive as using the picture element didn't make sense to me; I couldn't understand how to put the image attributes for the source element with the image and doubted if it would work.
Community feedback
- @ZoksssPosted over 3 years ago
Hey, I achieve that changing image with simply adding empty div for image (no image in html) and after you can change image trough css with background-image: url(); and based on responsive you can change it afterwards easily, but I have seen people also use 2 img tags for 2 images, and then they hide one they don't need trough css.
Responsive looks alright, but you have multiple declaration of same thing. Eg. in .container { color: white; } and you have exact same thing in responisve down. You should remove unnesasery lines. Also you can look up mobile first responsive, which in my opinion is kinda easier, but its important nowdays.
Also you could learn SCSS which is CSS preproccesor, its basicly CSS with more cool features.
You will still learn CSS, but you will increase productivity, and its pretty much standard today.Hope this helps :)
Marked as helpful0@HYDROCODERPosted over 3 years ago@Zoksss Thank you for your feedback! I will try those methods for changing images as you said and yeh you are right, I should use scss more but I kind of like bare css as I dont have to remember the new names I gave to the colors, but as you said it is more productive and for the next challenge I am using scss variables.....Even though responsiveness seems ok to me it comes crashing down when images are involved. Unfortunately images just get messed up one way or the other when using them but since it is inevitable to use them I am trying to get comfortable with them and I hope I will get better at them..... I have a query though, so are you implying that if we declare a media query for a particular block of css code and if we want to change only some of it's properties, will the unchanged properties get inherited automatically even if we don't mention it in the media query(like the color property)?
1@ZoksssPosted over 3 years ago@HYDROCODER yes, you need to change only properties that you want to be changed, if for eg. color of text is the same in both layouts (desktop and phone) you don't have to write it again in media query.
1
Please log in to post a comment
Log in with GitHubJoin 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