Huddle lading page | HTML, SCSS | Gradient animated button

Community feedback

• 

  Jesse•430

  @jesse10930Posted over 3 years ago

  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!

  1

  ---

  

  Kris Pietrzak•340

  @krisp-devPosted over 3 years ago

  @jesse10930 Hi Jesse, thanks for your answer!

  The 'height: auto;' did indeed fix the issue! :) As for the 1440px I might just resize my screen to 1440px and try to match the design rather than setting the max-width, and if needed adjust for bigger screens with a media query.

  1
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  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!

  1

  ---

  

  Kris Pietrzak•340

  @krisp-devPosted over 3 years ago

  @AgataLiberska Hi Agata, much thanks for the articles! The one on resizing SVGs was very useful.. wish I had found it before when researching about SVGs.

  0