Huddle Landing Page

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! :)