Design comparison
Solution retrospective
Dear All,
Here is my very next little project. I am getting faster and faster which makes me super glad, though I am still struggling with responsiveness... It is definitely improving a bit, however, on some devices (e.g. iPhone XR or iPhone 12 Pro) it looks pretty weird and I don't know how to handle that. Any tips maybe?
Cheers to all of you,
Dalma
Community feedback
- @matiasluduena23Posted about 1 year ago
Hi Dalma! It looks very nice! Let me give you an advice.
- Try to use a img tag in your images, because if you use a image in the background that image don't have width and height until you have content. And also in your reset css you can add
img { max-width: 100%; display: block; }
this make all your images responsive to their parents. - When you make the above change you be able to remove the
.container { height: 80%; }
and the media queries.container {...} .text {...}
. - A good practice that helped me is to never use a height or width on a large element. Because if you use it your element is no longer responsive. Instead you can use a max-height: and a max-width. video
Hope this help you!
Good code!!!
Marked as helpful0@bdal90Posted about 1 year agoHi Matias,
Thank you! I've just started doing the course you previously recommended on responsive layouts. Still at the beginning and in the phase where things are getting more and more confusing, but hopefully the picture is going to get clearer soon! :) I'm not very satisfied with my result, it doesn't resemble enough the original, I've made changes, I just have to figure out how githib works in order to refresh my solution... Thanks again!
0 - Try to use a img tag in your images, because if you use a image in the background that image don't have width and height until you have content. And also in your reset css you can add
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