Skip to content
OverviewSolutions
30
Comments
131
Saad Hisham
@Saad-Hisham

All comments

  • Alessandra Oliveira•710
    @itsale-oSubmitted about 1 year ago

    Hello 👋

    This is my solution to the news homepage challenge. For me it was an easy one, I had some challenge with the CSS part, but nothing too hard.

    Feedbacks are welcome

    News Homepage Solution

    1
    Saad Hisham•1,750
    @Saad-HishamPosted about 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,750
    @Saad-HishamPosted about 1 year ago
    This comment was deleted about 1 year ago
    1
  • Nivrii•410
    @nivriiSubmitted about 1 year ago

    I'd love to hear your input on this project.

    html css JS

    1
    Saad Hisham•1,750
    @Saad-HishamPosted about 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,750
    @Saad-HishamPosted about 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,750
    @Saad-HishamPosted about 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
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqSubmitted about 1 year ago

    👾 Hello, Frontend Mentor Community,

    This is my solution for the Loopstudios Landing Page.

    • Scored 98.6% on Google Pagespeed Insights! 🤩
    • Comes with Custom navbar w/ scroll-in & scroll-out animation 🔥
    • Accessible hamburger menu w/ ES6 🍔
    • Actually i delayed to post this solution, this was completed about 5 months ago ⏪
    • Minified the css files to improve site performance 🚀
    • Used Prettier code formatter to ensure unified code format ⚙️
    • Layout was built responsive via mobile first workflow approach 📲
    • Had a lots of fun while building this challenge ! 🤠
    • Feel free to leave any feedback and help me to improve my solution 💡

    .

    👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    LOOPSTUDIOS LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

    4
    Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    Welcome back, bro 🎉😅

    1
  • Saad Hisham•1,750
    @Saad-HishamPosted about 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
  • Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    Hi Arianna! 🙋‍♂️ Congratulations on completing the challenge! To align the input and button on the same line just give the form flex property

    form {
    height: 50px;
    display: flex;
}

    Keep up the great work and happy coding✨

    1
  • Jesus•190
    @GalindezproSubmitted about 1 year ago

    Es el mas sencillo que he hecho hasta ahora

    Tarjeta QR

    1
    Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    To center the parent div on the screen, you can apply the following CSS edits:

    .contenedor__general {
  width: 100%;
  min-width: 315px;
  margin: 0 auto; 
  background: var(--Grayishblue);
  padding: 20px;
  min-height: 100vh;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

    In the updated CSS:

    The margin property is set to 0 auto to horizontally center the element by setting equal margins on the left and right sides.

    The justify-content property is set to center to vertically center the content.

    These adjustments will help center the parent div on the screen both horizontally and vertically. Great job keep it up happy coding ✨

    Marked as helpful
    1
  • Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    I'm not sure that you deployed it correctly just run these commands in order in the folder where the src folder is located that's the most important 1-git init 2-git add . 3-git commit -m "first commit" 4-git remote add origin "link of GitHub repo" 5-git push -u origin master I use Vercel it's the best hosting free service I tried if you don't like to do all these steps you can simply run the build command and drag and drop the build folder in Neltify that's the most easy way I hope that helped you 😬 happy coding❤

    Marked as helpful
    0
  • Gustavo•80
    @cantocaracruzSubmitted about 1 year ago

    Disclaimer: this is my very first Astro project so the code may look kind of messy.

    I have only one problem: I can't figure out why on mobile the layout is cut in the 4th card (the temperature one). It doesn't happen when I test it on desktop, even when using the responsive tool, at any width or height the layout seems normal, but when I open it in my phone it has that specific problem. Other than that it works

    Planet Facts - Only Astro SSG

    2
    Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    This is very nice the animation when toggle too was amazing great job 🥰

    1
  • Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    Good job, If you use the font attached in the style guide file, it will be better

    0