Used Grid and Flexbox, HTML picture element

Community feedback

• 

  Aruj Joshi•290

  @gtalinPosted over 1 year ago

  Congratulations on completing this challenege.

  You enquired about your layout breaking. I have a few suggestions.

  Using a container with a width of 60% is not needed. The max-width of 700px is good enough.

  Instead of making the container as flex beyond 375px, you can apply a breakpoint at 500px or 600px by looking at the design and seeing what works for your layout. What you can do is that beyond 375px screen size and till you hit the next breakpoint, you can keep the container width exactly what it was (375px) and don't make the primary and secondary text sections 50%. Beyond 600px or whatever next breakpoint you choose, you can apply max-width: 700px and apply flex so that the primary and secondary sections are side by side (even then you don't need to set a width of 50% on them because flex will take care of it.

  For the font, you can change the font size in the media query as well.

  Hope this helps you in fixing your layout.

  Marked as helpful

  0