Skip to content
OverviewSolutions
17
Comments
16

Bibiwei Pere

@Bibiwei-PereBayelsa, Nigeria490 points

Hi, I'm Pere. Let's connect on Twitter and share experience! Checkout my GitHub profile for my recent projects.

Latest solutions

View more solutions

Latest comments

  • Bibiwei Pere•490
    @Bibiwei-Pere

    Hi, trust you day is going well and Congratulations on completing this challenge.

    I noticed your design is not responsive on different screen sizes. The reason it's because you did not use media queries. Your gave your main a width of 1200px, it'll display perfectly on laptop because the size or resolution is greater than 1200px. So, what of devices like mobile phones whose screen sizes are lesser than 1200px?

    Therefore to make it responsive you add Media queries and any CSS added within this media queries will only reflect in the screen sizes specified. For example

    @media (max-width: 890px){
   main{
      max-width: 500px;
      width: 100%;
      flex-direction: column;
      }
    
     h1{
      color: blue
      }
    
    .form{
      max-width: 350px;
      width: 100%;
      }
     
      *And so on*

}

    All the changes made above will only appear on device lesser than 890px in size or resolution.

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
  • Bibiwei Pere•490
    @Bibiwei-Pere

    Hi

    Congratulations on completing this challenge

    You did great but I noticed that the desktop version of your challenge is not properly centered. To fix this create a CSS for your body tag in your style.css and add the following.

    body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
  • Bibiwei Pere•490
    @Bibiwei-Pere

    Okay bro, I'm glad I could help. Please let's connect on GitHub and twitter. I'm following you already.

  • Bibiwei Pere•490
    @Bibiwei-Pere

    Hi

    Congratulations on completing this challenge

    You did great but I noticed the desktop and mobile version of your challenge is not properly centered. To fix this add the following CSS to your body

    body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
  • Bibiwei Pere•490
    @Bibiwei-Pere

    Hi

    Congratulations on completing this challenge

    Firstly, use min-height instead of height. Using height makes your solution not scrollable on smaller screens. Also the appropriate background color for the body tag is given below

    .body {
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
}

    Lastly, remove box-shadow from .tile because it's not necessary for this challenge

    Overall, you did a great job 👍

    Hope you find this helpful

  • Bibiwei Pere•490
    @Bibiwei-Pere

    Hi

    Congratulations on completing this challenge

    Firstly, use min-height instead of height. Using height makes your solution not scrollable in smaller screens.

    .mainBodyContainer {
min-height: 100vh;
}

    Also, to stop the container from overflowing. Add d following line of CSS

    .QRcodecontainer {
max-width: 280px;
width: 95%;
}

    Check this Solution for more info

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
View more comments