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

All comments

  • Bibiwei Pere•490
    @Bibiwei-PerePosted about 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 about 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 about 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 about 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
  • Muhammad Muzzammil•350
    @mk-muzzammilSubmitted over 1 year ago

    => I find difficulty in dealing with mobile responsiveness how i can set the sizes of container so that it will not overflow from container .

    => i think there is no problem in my code

    =>Yes i want to know the best practices that will help me to be good on html css

    Responsive QR Code Page using CSS flexBox

    1
    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
  • nina1234567896•280
    @nina1234567896Submitted over 1 year ago

    Hello fellow coders! I tried to make my website as responsive as possible but may have failed. Where can i learn more about responsive design?No article seems to explain it well. Using pixels in my project was intentional because it didn't seem like the card looked different on mobile and desktop apart from the margins. Is my approach valid? Is using absolute units appropriate if a website is going to look the same on all devices such as this project? I also came across a problem trying to use the device developer tools. How do i stop the page from zooming in and out when changing the device width and height on google chrome?(i have tried switching off auto zoom). Your feedback is appreciated

    profile card with html and CSS

    1
    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
  • Otabek Toshtemirov•180
    @OtabekToshtemirovSubmitted over 1 year ago

    I just trained my skills in HTML and CSS for don't forget them. I didn't use any frameworks or libraries. I just used HTML and CSS.

    HTML and CSS

    2
    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
  • JesseFortuin•30
    @JesseFortuinSubmitted over 1 year ago

    How do I ensure my aspect ratios stay consistent. opening inspect tool messes with my page. proportions were incorrect. Feedback would be appreciated, thank you.

    ResultsSummaryComponent

    2
    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 over 1 year 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