Responsive landing page using flexbox

Community feedback

• 

  Anton Sukhadolets•330

  @SuhodolecA

  Posted over 3 years ago

  Hello! Beautiful work! With a few changes, you could improve your solution.

  1)You have a little gap between "main-picture" and "container". You can fix this using:

  .main-picture { display: block; or vertical-align: middle; }

  2. The main section has the wrong background color. Fix:

  main { background-color: white; max-width: 400px; border-radius: 1rem 1rem 0 0; }

  3. plan-info section, use the following properties to fix some differences between design and your solution: "border-radius", "padding", remove "justify-content: space-around" this property For example:

  .plan-info { display: flex; align-items: center; width: 100%; background-color: var(--VeryPaleBlue); margin: 2rem; border-radius: 10px; padding: 10px; }

  10px values it's approximate because i don't have that layout now, use correct values.

  Next, .plan-info img use here margin-right For example:

  plan-info img { justify-content: flex-start; max-width: 100%; margin-right: 10px; } 10px values it's approximate because i don't have that layout now, use correct values.

  And for plan-info a use "mragin-left: auto"

  .plan-info a { color: var(--BrightBlue); font-weight: 500; margin-left: auto; } After these fixes, in my opinion, your solution will be exactly the same as the layout!

  Good luck!

  10

  Marked as helpful
• 

  Thiago Vasconcelos•40

  @Thiagovasc

  Posted over 3 years ago

  Thx for the feedback I will follow your tips

  00