Responsive Huddle landing page

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hey there,

  Your solution looks good on the two specified screen sizes, however you should aim for making it work for all widths. There's a few issues with this solution:

  1. Your breakpoint isn't working well at the moment. My suggestion would be to start with the mobile view and as the screen size grown you gradually change css rules. You can even add more than one media query if needed.

  2. Your images lack responsiveness thanks to this piece of code: width: 100%. This means your images will be 100% width, even if they don't fit the screen size, that's why you're having issues in a couple of places. Just change it to max-width: 100% and height: auto, that should take care of it.

  3. There's a fixed height set on your "rows" which is causing an overflow on most screen sizes. You don't need to set a height for most elements, just avoid it when you can!

  4. Buttons have some default styles you need to overwrite when you're working with them, like font-family.

  5. Your social media links are missing aria-labels.

  This can be a fairly tough challenge if you're not confident with flexbox, positioning and media queries. Doing some easier challenges first would be a good idea perhaps, they are a great way to practice these things on a slightly smaller scale! Or you could just keep going with this one but in that case I suggest you look up some of the topics mentioned above. If you don't already know Kevin Powell, check out his channel, he has plenty of great videos on all CSS topics!

  Marked as helpful

  1
• 

  Dogan Saglam•350

  @dsaglam94Posted almost 3 years ago

  Hello! I really appreciate that you took your precious time and wrote all these great advices! I'm gonna check everything and try to understand the problems. Yeah that challenge was a bit difficult for my state but I wanted to give it a shot. When it came to make it responsive, it's where the things got complicated and I couldn't keep up with it.

  Also when it comes to width / height of the elements I got lost and couldn't figure out how much is okay or needed. I think that's my biggest problem at the moment.

  I will redo the challenge project once again when I figure out the mistakes and come up with a better coding flow.

  1

  ---

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  @dsaglam94 I think that's pretty normal. At least, I remember width/height issues caused me a few breakdowns back when I was starting out with CSS. :D

  As a general rule, you'd want to avoid using set heights. There are a few instances when you'll want to use them (like setting a min-height: 100% on the body when using grid/flexbox) but in most cases you can just rely on elements having a default height and if you wanna increase that, add some padding to them! Width can be trickier. Play around with max-width/min-width in a codepen and see what they do! :) By using them, you can take care of most sizing issues. Also watch Kevin Powell, I learned almost all I know of CSS from him.

  If you have any issues or just want to chat, hit me up on Slack, I'm not an expert but I'm always happy to discuss web dev stuff ^^

  0