Huddle Landing Page

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great job on this challenge!

  For the most part, your page is responsive, but if you expand the viewport a lot, you'll find that the content is no longer centered on the page like it is in the design.

  On smaller screen sizes, this isn't noticeable because the main element doesn't reach the max width that you've set, which is 110rem.

  You can fix this by setting align-items to center on the desktop version of the site:

  @media screen and (min-width: 1070px) {
    body {
      align-items: center;
    }
  }
  

  When looking at the dev tools, I saw that the background wasn't working on the desktop version because of an error in the value of the background property.

  You initially wrote this:

  background: url(images/bg-desktop.svg), hsl(257, 40%, 49%), no-repeat;
  

  This was incorrect because the no-repeat value was not being applied to the image due to it being separated by a comma.

  The correct way to set the image to no-repeat would be this:

  background: url(images/bg-desktop.svg) no-repeat, hsl(257, 40%, 49%);
  

  Essentially, different elements of a background (images or colours) are separated by a comma, and if you want to apply certain background properties to these different elements, then you write them next to the element and only separate them by spaces.

  However, doing this then raises another issue, which is that the background image doesn't span the entire height of the viewport if you increase the viewport's height past a certain point.

  This is because you've set the background-size to 100%, which makes it take up the width of the viewport, but doesn't account for changes to the height of the viewport.

  A simple fix for this would be to change the value of this property to cover instead. In doing so, you're making it so that the background image fills the container (in this case the viewport) while maintaining its aspect ratio, so you won't run into any issues where the image becomes stretched.

  If you find that you don't like how the image is positioned on certain screen sizes after applying these styles, you can adjust it with the background-position property.

  You can read more about this property here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

  Hope this has been helpful! :)

  Marked as helpful

  0

  ---

  

  Rod•90

  @RodRyan19Posted 9 months ago

  Thank you so much! Ill change it right away, thanks again! I hope I can mention you if i need help again (if thats okay with you), Im kinda new and wanna get the rights fundamentals in html and css before going to bootstrap then js. thanks! @VenusY

  0

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @RodRyan19 No problem at all! I'm happy I was able to help you out again. :)

  Marked as helpful

  0