Responsive Huddle Landing Page - SASS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Luis, great job working on this challenge, and I think everything looks great here, especially in getting your solution to look really close to the design! The responsiveness works well where the page has optimal views when the browser size is changed, and I don't see any major issues really. The only thing is, with the height: 100vh on the hero container, if you resize your browser so that the height is smaller than the contents, the contents will be cut off and cannot be scrollable upwards. You can try this out and see what I mean. To fix this, I would remove the height there and put a min-height instead with a flexbox, and then in the .container, I'd add flex:1 so that things could stretch out. Everything looks like this:

  .hero {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
  }
  .container {
     flex: 1
  }
  

  Also, do be sure to check out the accessibility issues in your report and see how to fix them. Great work here again, and keep going!

  Marked as helpful

  0

  ---

  

  Luis Pellizzon•50

  @lhpellizzonPosted about 2 years ago

  @elaineleung You are a start!!! Any advice how to set the background image to be like the design? I`m really annoyed by this because the design cover the circle of the background on the middle. I really trying to avoid looking into yours one that I saw it is 100% like the original design haha. I will fix all the issues right now and update <3

  0

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @lhpellizzon Hi Luis, I know what you mean about the circle! What I did for the background was, I started it as the mobile version with background-size: contain, and then changed that to background-size: cover at the 800px breakpoint. Since it's an SVG, I just kept the mobile version up until the 1440px, which was when I changed it to the desktop version with background-size: contain. It took me a while to figure out too, but I liked how I turned out!

  0