Responsive solution with flexbox

Community feedback

• 

  Adeola Ganiu•1,320

  @DeolabestPosted about 2 years ago

  Hey Radoslaw, nice attempt!

  Here is some feedback if you don't mind:

  1. For the .container, try to use display: grid; and grid-template-columns: 1fr 1fr; to split its contents evenly.

  2. Try to edit the top and bottom border radius on the right.

  I hope this helps!

  0
• 

  Amdrew•40

  @AmdrewMGPosted about 2 years ago

  Hi Radoslaw, I have some ideas that might work to make your page look like the one in the challenge:

  -Use the em/rem units since being relative units helps it work better on the devices.

  -In @media instead of using min-width with that amount of px you could use max-width to adjust it better to mobile devices.

  • In the .container class you can use the flexbox to arrange the content in columns or you can use Grid for that.

  If you have any doubt about what I have just said you can write me, I hope I have explained well hahah, if you have any doubt let me know.

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Radoslaw, congrats on finishing the challenge good job using the picture tag!!

  I would like to give you some feedback if you don't mind.

  • Try not using vw for widths! instead of that I encourage you to use relative units like rems or ems, they will get your site much more responsive and it will be easier to get the desired result!

  • I also recommend you using a styleresetor like normalize.css. This will remove all default browser styles making your app much easy to style (because every browser has his own styles!).

  • Apart from that try using more semantic tags like main to wrap all the content or footer for your attribution.

  Hope my feedback helps you in future projects, if you have any questions, don't hesitate to ask!

  0
• 

  Shane Chaffe•900

  @ChaffexdPosted about 2 years ago

  Hey Radosław, a few things to note:

  • When visiting on a desktop, the object isn't a square and the image doesn't align with the right hand side.
  • Maybe with your widths, try using a % value instead of vw/vh
  • Consider changing hardcoded px values to em/rem for responsiveness
  • Ensure the boxes match up with correct styles, the left side has a border-radius but the right-side does not.
  • Using flex on your container could allow you to align-items centrally and then justify-content space-between for example for a cleaner layout similar to the project design.

  Overall, not a bad attempt but some things to work on like all good projects :) I'd recommend checking the design as you build to ensure you are following the guideline!

  I hope this helps!

  0