Four card landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks fine but when resizing, the site's content are being hidden, take a look at points 990px and some issues arises. Mobile state is fine but the breakpoint is too early, right now mobile view occupies 0-985px which is too big don't you think? You could make use of something like 2x2 layout before transition to a single layout so that the layout will be seamless.

  I agree with Abdul to use grid on this one since it will be much easier. For some other suggestions, here are couple ones:

  • The texts Reliable, efficient delivery Powered by Technology is just a single phrase so it will be great to only use h1 to wrap the text and just use max-width to make the text wrap on another row. Adjust the max-width value until you got the desired result.
  • On the .container, instead of using width: 1110px, use max-width: 1110px so that the layout won't have an explicit size and will let the layout resize if it needs.
  • Lastly, just the mobile breakpoint and the idea of adding a 2x2.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Abdul•255

  @abdulrahman-rwimPosted about 3 years ago

  Hey @jones9411, you can solve this problem using grid I'm not sure how to solve it with flex-box,

  • this will solve the problem without using margin .column.c { display: grid; align-content: center; } I hope this was helpful for you 😄

  Marked as helpful

  1