Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Experiemnting with rem and struggling with responsiveness

NBD 240

@bdal90

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

@matiasluduena23

Posted

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 helpful

0

NBD 240

@bdal90

Posted

Hi 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

Please log in to post a comment

Log in with GitHub
Discord logo

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