HTML & CSS only

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The desktop view is fine thought some appears small, the mobile view is fine but resizing the browser, a lot of issues especially element responsiveness.

  Some suggestions would be that:

  1. Do not remove the outline property on the interactive elements like button. This helps users who uses keyboard, to know where they are when they are navigating on your website. If you remove this, remember to add a :focus selector on those and adding some custom properties like border or box-shadow, an indicator for the user.

  2. The images does not really need to have that transition effect. They are just for decoration and they are not really interactive so it is not really suited for them to have that effects.

  3. Font-sizes needs to be adjusted, right now, some are smaller than what it needs to be. Adjusting them will be awesome.

  4. Social media icons needs to be wrapped inside a tags, since they are links, they need to be inside a tags.

  Resizing Issues:

  • Going down until your mobile breakpoint. The images are changing and they are too small for the layout. The text get's very narrowed, the buttons are wrapping the text inside them and your footer text goes in different directions.

  • You can address this via making sure everything scales or creating another breakpoint in which you will create a layout for it. That way, the elements does not really needs to be shifted very small until the mobile breakpoint is reached.

  But still, good job on this one^

  1

  ---

  

  Christian Patrick Nebab•255

  @Dnghckr16Posted over 3 years ago

  @pikamart how do i fix when resizing my browser until the breakpoints of mobile view? should i use media queries for every screen view like tablet size?.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @Dnghckr16 Hey, well that is another option right.

  Making a breakpoint like at 1000px going down, if you are desktop first. Then perhaps adjusting first the overall padding of the container so that the elements have more width, but it will just a little. Also, if you somehow can use a clamp function on your image, then this will be great since you can specify its min and max dimension. Also adjust the gap of every card since it is too big, you start at 80px, maybe lowering it down, since you can just justify-content: space-between to spaced out the left and right content of the flex.

  Then at point 700px, you can just use the mobile layout on this one

  0
• 

  Christian Patrick Nebab•255

  @Dnghckr16Posted over 3 years ago

  sorry I use 1280 screen laptop view for this challenge

  1

  ---

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @Dnghckr16 do not be sorry it looks good big and small 🌟🌟🌟🌟🌟 good job

  0