Responsive stats preview card

Community feedback

• 

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  Hello there! Yes, this is a tricky one challenge. If you allow me, here are a few suggetsions: For the image troubble, you may look for picture tag in HTML 5.

  There are other issues regarding responsiveness. First of all, you would want to set the following styles in your body tag:

  body {
      background: var(--main-background);
      display: flex;
      flex-flow: column;
      justify-content: start;
      align-content: center;
      min-height: 100vh;
  }
  

  It will allow you to set the main tag a justify-content:space-between, and the two sections of the card will be equally apart.

  For the main tag it self, you can set

  main {
      display: flex;
      justify-content: space-between;
      max-width: 820px;
      background: var(--card-background);    
      margin: 7rem auto;
  }
  

  The max-width attribute will avoid the stretch effect. For .main-content and .img-background, you'd want to set a width:100%, for the .main-content a padding:2rem is enough and finally for the order of element's to swap, you may want to set

  @media screen and (max-width:820px){
  main {
      display: flex;
      flex-direction: column;
        width: 375px;    
  }
  .main-content {
      padding: 2.5rem;
      text-align: center;
      order: 2;
  }
  }
  

  If you have further questions, please, reach me out, I'll be more than happy to contribute somehow. I must say that looking at your solution now, mine might be over elaborated, I'll review my code right now haha 😅.

  Marked as helpful

  0

  ---

  

  Gwen•40

  @gwencodingPosted about 2 years ago

  @WebDevCampos Thanks for your feedback!

  I have incorporated the elements shown but I have a problem with picture tag, the image in the mobile version does not display at all and I have been stuck ever since. Could you tell me where the error is coming from?

  <picture class="main-img">
  
            <source srcset="image-header-mobile.jpg" media="(max-width:820px)">
            <img src="/images/image-header-desktop.jpg" alt="women in office">
            
          </picture>
  

  Many thanks again!

  0

  

  Marcus Rangel•460

  @WebDevCamposPosted about 2 years ago

  @gwencoding Hi there! You just have forgotten to point the srcset correctly! Happens a lot haha 😅. You should put like this: <source srcset="/images/image-header-mobile.jpg" media="(max-width:820px)"> And you should set img{max-width:100%} so when in mobile it fits properly. Kind regards!

  Marked as helpful

  0

  

  Gwen•40

  @gwencodingPosted about 2 years ago

  @WebDevCampos 😩 You helped me so much, small details are always hard to find. 1000 THANKS 🙌 and good luck on the other challenges !

  1