Huddle lading page | HTML, SCSS | Gradient animated button

Hi Kris, great job on this project! It looks great! I can't answer your question about SVGs, as I'm not too familiar with how to use them.

To your second question about the smaller screen sizes, the HTML for the SVG with a class of 'container__col1--img' has a 'height="506"' attribute, which is preventing the height of that div to be responsive. So as the screen width gets smaller, the image is responding but the container's height is staying constant, which gives the appearance of those margins. If you add:

svg.container__col1--img {
    height: auto;
}

to the media query for smaller screens, I think that will fix the issue.

To your last question, if we set a max-width to 1440px, it could have adverse effects for anyone using your app on a large monitor. I think they give us that info just so we know the relative size of the screenshots we are looking at. But again, not something I'm sure of.

Anyway, hope this is helpful! Happy coding!

Hi @krisp-dev! I think the reason you get top and bottom margin is that the svg file you're adding has a set height of 506px. This article on resizing svgs may be helpful (I personally prefer to set images as background-image if they're just decorative - I find divs a lot more predictable than <img> and <svg>. Is that a lazy approach? Maybe :))

The widths in readme are a guide only, I think you should aim at making the design look good on any screen size. This may involve setting a max-width so the page doesn't stretch a lot on larger displays, but it doesn't have to be 1440px. I would also not set max width on the body element, but I did a quick google search and haven't found anything that specifically advises against it. But I found this interesting article so I though I would share it - setting height and width on html vs body tag

Hope this helps!