Responsive Huddle Landing Page max width 375px

Community feedback

• 

  Wisdom•170

  @UnifiesPosted 7 days ago

  Hello Youssef, congratulations on completing your first challenge on Frontend Mentor, especially with a tricky challenge like the Huddle Landing Page.

  Your solution differs considerably from the given design though, see below:-

  • The background image covers everything in the body - including the socials and attribution - so delete the static height [100vh] assigned to the body [which owns the background image] and allow the bg-image to scale automatically as body content increases/decreases.

  • The social icons should have some padding, border-radius and hover effect - the same hover effect that was used for the Register button should also be used on the social Icons to match the active state design

  • The hero image and hero copy content part of your solution spans across each other - the image looks huge and spans over to the copy's corner while the copy sits on top of the image making it hard to make out what is written.

  Instead, create a div that'll contain just the image's div and the content's div, such that:

  <div class="heroContainer>
        <div class="heroImage>
          <img src="">
        </div>
        <div class="heroContent>
          <h1> </h1>
          <p> </p>
          <button> </button>
        </div>
  </div>
  

  Then for CSS, give a display: flex; justify-content: space-between; to the heroContainer div and a flex basis of 50% and 45% to the image and content divs respectively. The remaining 5% becomes the gap between the two divs - this way nothing gets displayed over the other.

  PS: I'm sure there are a lot of ways to go about this, so use your findings too - just ensure the items look right in the respective position and size-wise.

  • There used to be a CSS styling for the attribution div, seems like you deleted it mistakenly - this changed up the attribution size and has it left aligned instead of center aligned.

  • Right now, the solution is not accurately responsive and hence doesn't look good on all screen sizes - consider changing fixed sizes to responsive sizes and inspect the result at all screen sizes to ensure it looks as should.

  Some code optimization suggestions for your CSS:-

  In order to create a clean, reusable code, it is recommended to create colors, fonts, and sizes as variables like so:

  :root {
      /* Colors */
      --White: hsl(0, 0%, 100%);
      --Slate-300: hsl(212, 45%, 89%);
      --Slate-500: hsl(216, 15%, 48%);
      --Slate-900: hsl(218, 44%, 22%);
      /* Fonts */
      --fs-h2: 0.95rem;
      --fs-p: 0.85rem;
      --fw-400: 400;
      --fw-700: 700;
  }
  

  and then you can use them for styling like background-color: var(--Slate-300);.

  Reason being: These things may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s. --Slate-300 is a custom name, you can name it anything you want. But for readability giving it a meaningful name would be better.

  Avoid using hard coded values, like width: 825px; use max-width: 825px; instead, max-width: 20rem; would be even better. Em/rem units are better for responsiveness.

  Implementing above changes will have your solution replicating the given design as much as possible, which is the goal for the challenges. I hope you found this helpful - Happy coding!

  Marked as helpful

  0

  ---

  

  Youssef Mohammed•90

  @YussefMoPosted 6 days ago

  @Unifies thanks for you'r help about the var thing i was not knowing about it but i start using it start from my sec challeneg i use it with bento grid and for the web not displaying right the prop was my screen 1920 width for me it was right vew but i forgot about the challeneg is about 1440 width screen so i fixed it you can check the changes and agin thank you for helping me out

  0

  

  Wisdom•170

  @UnifiesPosted 5 days ago

  @YussefMo That's great that you used CSS variables for your challenge!

  Concerning the web not displaying right, you did correct it for 1440px screen width but it still looks misplaced on some screen sizes.

  To always ensure that your solution is responsive and looks great on all screen sizes; right-click anywhere on the webpage, find the inspect option and click on it. Depending on the browser you're using, look for the responsive mode button [It is usually an icon of a PC and mobile, or a tablet and mobile], hold and drag the cursor to increase/decrease the viewport and see how your solution looks on all screen sizes - for future challenges.

  But given your code structure and use of fixed sizes for elements in this challenge, it might be hard to achieve responsiveness easily, so I'm going to suggest a better way.

  Alright, this might be long as I'm trying to understand your code and working my way top to bottom..

  First off, the logo image is in the header part of the webpage - it has no business sharing the same div with the big hero image; so restructure the code like so:

  <header>
      <div class="cont1">
          <img src="./images/logo.svg" alt="logo" class="logo">
      </div>
  </header>
  

  The logo display size looks alright on all screen sizes so I'll leave the CSS styling as is.

  Now for the main content part, I'll revisit the code structure in my initial response:

  </header>
  <main>
    <div class="cont2">
      
      <div class="imageContainer">
          <img src="./images/illustration-mockups.svg" alt="mockups" class="mockup">
      </div>
      
      <div class="contentContainer">
          <h1>Build The Community..</h1>
          <p>Huddle re-imagines..</p>
          <button>Register</button>
      </div>
      
    </div>
  </main>
  

  This will allow you to give a display: flex; to the cont2 div such that:

  .cont2{
      display: flex;
      justify-content: space-between;
  }
  
  .imageContainer{
      flex-basis: 50%;
  }
  
  .imageContainer img{
      width: 100%
  }
  
  .contentContainer{
      flex-basis: 45%;
  }
  

  This way everything is neatly structured on all screen sizes according to how they are grouped and should appear on the webpage.

  Also, if you notice, I gave a width of 100% to the mockup image AFTER giving a width [flex-basis] of 50% to it's container. This allows the image to automatically increase or decrease in accordance with screen width

  You currently have the mockup image's width set to a fixed 825px and 620px respectively, which is a HUGE reason why the page is not responsive. Using responsive units such as %, em, rem instead makes creating a responsive website super easy because they shrink or grow automatically and you don't have to monitor irregularities at every breakpoint.

  Another beneficial change will be increasing your mobile breakpoint - you currently have it at 375px - increasing it to around 700px will further improve responsiveness as it moves things around before the content gets too constricted.

  This should solve the responsive appearance of the content no matter the screen size, let me know how it works.

  Marked as helpful

  0