Skip to content
OverviewSolutions
7
Comments
3

Fin Tatum

@tdtatum2Kansas, USA150 points

Hi, I'm Fin! I'm a Junior Web Developer who loves creative designs :)

Latest solutions

View more solutions

Latest comments

  • Fin Tatum•150
    @tdtatum2

    Hi there Vashinator!

    I wanted to share some knowledge with you that was shared with me when I submitted this same project.

    Because you have your body set to a width of 1440px or 375px when at 480px screen width of below, your QR code component can oftentimes be off screen on certain screen sizes. Instead, try setting body min-height to 100vh and utilizing either flexbox utilities to align the component in the center of your page or CSS grid utilities to place-items center!

    Also, here is a great article on box-shadows if that helps you understand it a bit better: Mozilla Box Shadows.

    In case this is useful to you, I was also pointed in the direction of this amazing CSS Reset that you can use to nullify a lot of annoying default CSS values to take control of your design.

    Lastly, while it's only 4 lines here, I think (I could be wrong) that it is better to remove unused CSS just to increase page loading speed. Again, it's probably rather inconsequential here, but it can definitely matter when you get into larger file sizes and more and more unused CSS.

    Overall, I still think you did a great job!! I hope some of my tips help, and I wish you luck in completing more challenges!! :)

  • Fin Tatum•150
    @tdtatum2

    Hi Aditya!

    I just wanted to say that you did a great job with this challenge :)

    My only recommendation is, while it is fine to not use media queries here, be careful with the sizing of your card component. Since yours is a little larger than the design's, and you have padding as well, the card is not entirely on the screen on a small phone like an iPhone SE, which is the same width as the mobile design image.

    I also got the recommendation of using a CSS Reset when I submitted this same challenge, so I will extend that advice to you! It helps with the default margins and paddings, which are pushing your element slightly to the left on my screen as well.

    Great work and happy coding! :)

  • Fin Tatum•150
    @tdtatum2

    Hey there Daniel!

    I'm still pretty new to all of this, so please take my advice with a grain of salt, but I think I have some pointers that may help!

    • I would look into potentially using flexbox utilities to position your component. I set my body to display: flex; and justified and aligned the contents in the center so that it would always appear centered on any screen size.

    • I think because you have a set body width and height, and it changes with media queries, the component sometimes appears offscreen when changing screen sizes. I simply set my body to height: 100vh (I was advised min-height: 100vh is better) so that the container scaled with the screen size.

    Regardless, I think you did a great job! :)

    Marked as helpful