Skip to content
OverviewSolutions
30
Comments
130

Saad Hisham

@Saad-HishamEgypt1,770 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there! 🙋‍♂️ Great job completing the challenge! 🎉 If you try to zoom out, you may notice that the design gets ruined, especially on larger screens like 4K and 2K. To solve this issue, you can wrap your page content in a container. This container should have a maximum width and be centered on the screen. You can achieve this by adding the following code to your existing code:

    main {
    max-width: 1110px
    margin: auto;
}

    Great job keep it up ✨

    Marked as helpful
    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there 🙋‍♂️ this media query breaks the site on screens over 1440px on my 1920 screen, I see the mobile design just remove the max (max-width: 1440px) to ensure it works well on all big sizes screen

    the rest is epic keep it up 💖

    2
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    to center the app on screen add this line to the body min-height: 100vh; and remove those

    body {
    /* margin: 1rem; */
    /* margin-top: 8rem; */
}
    Marked as helpful
    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there! 🙋‍♂️ It seems like you made a small mistake. You didn't deploy the site; instead, you attached the GitHub link in the deployment input. To resolve this, you need to deploy the site on a free hosting platform. One of the best options I've tried is Vercel. Here's what you can do:

    1. Create an account on Vercel.
    2. Link your Vercel account with GitHub.
    3. Deploy the site directly from Vercel.

    Alternatively, you can also consider using Netlify, which offers an easy drag-and-drop deployment process. Simply drag and drop the build version of your project into Netlify, and it will handle the deployment for you.

    Keep up the great work, and happy coding! 💖

    0
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Welcome back, bro 🎉😅

    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there 🙋‍♂️ Congratulations on completing the challenge!🎉 Here are some tips to improve your solution:

    1.Wrap the entire content inside the <body> tag within a <main> tag. This will help structure your HTML code properly:

    <body>
  <main>
    <!-- Your content goes here -->
  </main>
</body>

    2.Add the following styles to the <body> tag to center it vertically and horizontally on the page:

    body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}

    3.Apply the following style to the text within the section to better match the design:

    .section .text {
  max-width: 41rem;
}

    Keep up the great work✨

    1
View more comments