Stats Preview Card Component

Community feedback

• 

  Luis paz•390

  @Pazispeace

  Posted about 3 years ago

  Hi there Joseph! Nice solution :D I have some tips and adjustments that might help!

  • In your overlay div which is inside the images-section div. I would recommend you to apply a border-radius with the value of inherit to it (the overlay). If you look carefully the border bottom right and border top right are not rounded, that is because border-radius is not an inheritable property. For that you have to specify it in the class:

  .overlay {
      height: 100%;
      background-color: hsl(278, 75%, 33%);
      opacity: 0.5;
      border-radius: inherit; //here!!!!!
  }
  

  • I think 1500px for your image is way too much hehe, try it with 900 px or les (or a bit more) instead:

  @media (min-width: 800px)
  .images-section {
      background-image: url(images/image-header-desktop.jpg);
      width: 900px; //here!!!!!
      background-size: cover;
      background-position: initial;
      height: auto;
      border-top-left-radius: 0;
      border-bottom-right-radius: 10px;}
  

  • When shrinking the viewport, your text-section div overflows, that is because of the padding you added to it (top and bottom). Instead you can try adding display:flex with its flex direction in column, and justify-content:center; (this defines the alignment along the main axis. The main axis is Y (vertical) in this case because the flex direction is column). Additionally I added the flex-basis property this defines the default size of an element before the remaining space is distributed... Worth knowing that Flex-basis matches width when the container has flex-direction: row and a defined value other than auto. If the container had flex-direction: column, flex basis would match the height of the component, as long as its value is not auto.

  If the container has flex-direction: row, the value of the flex-basis property overrides the width property. The same with flex-direction column overriding the height property

  @media (min-width: 800px)
  .text-section {
      font-size: 20px;
      display: flex; //here!!!!!
      padding: 0 35px;
      flex-direction: column;  //here!!!!!
      justify-content: center;  //here!!!!!
      flex-basis: 80%;  //here!!!!!
  }
  

  -Try to not use px units since absolute units ( px , in , mm , cm , pt , and pc ) are as bad for accessibility and responsive design as using tables for layout

  Articles I think might be helpful:

  A complete guide to css Flexbox

  CSS Units For a Responsive Design

  PX, EM, or REM? Examining Media Query Units in 2021

  Happy Coding, I wish you a happy day! : )

  01

  Marked as helpful