Skip to content
OverviewSolutions
17
Comments
16
Bibiwei Pere
@Bibiwei-Pere

All comments

  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    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
    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    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
    1
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

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

    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    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
    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    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

    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    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
    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    Hi

    Congratulations on completing this challenge

    Firstly, you solution 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;
}

    Secondly, you can learn responsive web design from freecodecamp. They have an amazing Responsive web design curriculum.

    Also is not advisable to use absolute units unless when needed. Use px or rem.

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
    1
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    Hi

    Congratulations on completing this challenge

    Firstly, you design is not responsive. It's okay for mobile devices but not for desktop To resolve this add the following CSS to your .card

    .card { max-width: 400px; }

    Then a media query for the mobile design

    @media (max-width: 760px) { .card { max-width: 300px; }

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    Hi

    Congratulations on completing this challenge

    Firstly, the desktop version of your solution is not properly centred. To fix this add the following CSS to your body

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

    Also, the width of your mobile version is occupying the entire screen. To resolve this add the following CSS to make your design responsive on mobile devices

    @media (max-width: 760px) { .wrapper { width: 90%; } }

    Overall, you did a great job 👍

    Hope you find this helpful

    1
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    Hi

    Congratulations on completing this challenge

    Firstly, you did a great job and I must commend you on that. Your handled the active states, error message, responsive designs nicely.

    Your success message is also nicely displayed but it will be perfect if you add some padding

    Overall, you did a great job 👍

    Hope you find this helpful

    1
  • Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

    Hi

    Congratulations on completing this challenge

    Firstly, you desktop 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; }

    Also, the width of your desktop version seems very large than normal. To resolve this give you main the following CSS.

    main { max-width: 700px; display: flex; gap: 60px }

    Then your share the 700px assigned above equally to your result and summary div;

    .result { width: 350px; }

    .summary { width: 350px; }

    You can use any max-width you prefer but ensure you share it equally between your result and summary div.

    Check this Solution for more info

    Overall, you did a great job 👍

    Hope you find this helpful

    Marked as helpful
    1
  • Bibiwei Pere•490
    @Bibiwei-PerePosted almost 2 years ago

    Hi

    Congratulations on completing this challenge

    I tried subscribing to your Newsletter but I noticed my email did not display on the success page. To resolve this, include emailInput.value in your Javascript code. You can check my Newsletter solution for more info.

    Also, your Dismiss button doesn't remove the success page when clicked. To resolve this change the button tag to <a href="./"></a>
    The href attribute will redirect back to your homepage when clicked.

    Overall, you did a great job 👍

    Hope you find this helpful

    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted almost 2 years ago

    Hi Nice work! I tried subscribing to your Newsletter but I noticed your success page doesn't show the email I filled in the input. To resolve this update your Javascript code to include the emailInput.value. You can check my solution for more details. Hope this helps.

    Marked as helpful
    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted almost 2 years ago

    Hi! Nice work. I noticed your images and text does not take the entire width when in mobile screen. To resolve this reset or increase the width in your media query to stop the images and text from assuming the initial widths u set in desktop screen.

    Marked as helpful
    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted almost 2 years ago

    Hi

    Nice work! Use media queries to make your work responsive. You can check my solution for more details

    0
  • Bibiwei Pere•490
    @Bibiwei-PerePosted almost 2 years ago

    Hi @Whitney

    Nice work! But i noticed that your project is not responsive. Use the appropriate media query to make it more responsive.

    0