Responsibe page with Flexbox

Community feedback

• 

  Mayank Arora•430

  @mayankdrvrPosted about 1 year ago

  Congratulations @GrayTechFun for completing this challenge. Your design matches the solution very well.

  Here are a few observations-

  1. Below 335px width of screen, the text and card gets partially hidden, the text does not wrap and the image does not resize. Maybe, you can make it more responsive by setting the maximum width of card to be upto 100% of width of its parent container. See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
  2. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
  3. Avoid using <div> element in html file and use semantic html elements for better web accessibility.

  Updated CSS styling of html elements for a more responsive design(changes in comments)-

  .wrapper {
  	width: 32em;
  	max-width: 100%;
  	/* makes wrapper responsive */
  	display: flex;
  	flex-direction: column;
  	margin: 15em auto;
  	padding: 1.25rem;
  	background-color: white;
  	border-radius: 2rem;
  }
  
  img {
  	max-width: 100%;
  	/* makes wrapper responsive */
  	margin: 1rem;
  	/* makes all image margins equal */
  	border-radius: 1em;
  }
  

  Awesome solution and keep it up.

  Marked as helpful

  0

  ---

  

  GrayTechFun•100

  @GrayTechFunPosted about 1 year ago

  @mayankdrvr Thanks for your advice, I'll try to use these in the future projects.

  1