Landing Page With Alternating Blocks Using CSS Grid & Flexbox

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 4 years ago

  Hi @Rowkibet, good job here! The desktop version looks close to the design. For screen widths 376px to around 700px though, there is a horizontal scroll caused by overflow from the images and the .overlay div. I recommend using max-width rather than width to keep the div more fluid. Hover states for the footer links would also be a nice addition, if you will. Hope this helps :-)

  1

  ---

  

  Rowland•185

  @RowkibetPosted over 4 years ago

  Hi @emestabillo and thanks for reviewing my solution. Just wanted to know are there cases where max-width doesn't work? I tried using max-width property for the .overlay-btn but the width wasn't set so the button's size was only defined by the padding set.

  For responsive design, should I add more viewports or are the ones I used for this solution enough?

  For the footer links, I will try adding underlines that appear on hover but I can always check for other fancier hover states later

  0

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  @Rowkibet Not sure when max-width won't work, unless it's a cascade or specificity issue. You would probably need to adjust the padding as necessary with the changes in screen widths. The feedback I wrote here might give you an idea about the cta section.

  The media queries seem ok, if it were me I'd probably have 2 or 3 at the most. The design breaks at 376px, I think you can still use the styles for 375px up to the next breakpoint 750px.

  Hover state is great for UX, simple or fancy is fine as long as the user knows that something is clickable.

  1