Designed stats-preview page using html, css, bootstrap

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @rakshithjodukallu, Congratulations on completing this challenge!

  Amazing solution! I liked a lots the gradient text colors. Maybe I'll get inspiration to add this to my solution too

  Something you can do to improve it is keep the text content attached with the image instead of separated, otherwise it will not seem like a component.

  1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using GRID. All you need to do is to use display: grid to activate the Grid and then make the two columns with grid-template-column: 1fr 1fr and its done, now you’ve two columns. For the MOBILE VERSION you can switch to flex creating a media query using display: flex and flex-direction: column-reverse to make the image appear before the text content.

  2.To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Rakshith J•240

  @rakshithjodukalluPosted about 2 years ago

  @correlucas Updated the code like you said. Thanks brother.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @rakshithjodukallu This is nice! Keep posting amazing challenges!

  1