Skip to content
Submitted over 3 years ago

HTML, SASS, CSS

Bryan Sanchez•590
@0-BSCode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Questions:

  1. In the style guides file, it states the width of the mobile design and the desktop design. However, it does not specify what height we have to work with. Is there a set height for both the mobile and desktop designs I'm not aware of?

  2. Do we have to adjust the designs to fit any device dimension properly or are we only supposed to adjust it for the mobile design and desktop design without having to adjust for any change in dimension between the two? For example, if the mobile design is for a width of 375 px and desktop design is for a width of 1440px, are we to assume that the designs will only be either of these two dimensions or do we take into account widths between 375px and 1440px as well?

I'd be more than happy to receive answers to these questions and/or feedback on my code! I'd gladly appreciate any help.

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    1. if you take the design images in the project you can get the heights by comparing your code in the browser to the image opened at 100% in a photo viewer program. I used Irfanview it is free if you are using windows. Sometime the mobile images are 700px wide so you have to resize them or make them 50% to have them show on your screen at proper size. If you are serious about these challenges upgrading to PRO and getting the design files is very helpful if you are really trying to make things pixel perfect

    2. yes for most of these projects you should have a usable design between 375px and 1440px that is where the real challenge starts in how you implement the design and transition it. In the case of this project you just want to transition elements to desktop size once the view-port width is wide enough to accommodate them

    0
    Bryan Sanchez•590
    @0-BSCodePosted over 3 years ago

    @palgramming Thank you for the feedback! I'll keep these in mind next time.

    0

Please log in to post a comment

Log in with GitHub

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