Responsive Stats-preview page

Community feedback

• 

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  Hello, your page looks great. Regarding responsiveness, I have some tips.

  Firstly, giving the page a height after the media query (for the mobile display) forces all the elements to be displayed in that little space and so some are displayed on others. To solve this, remove the height so the elements take up their needed space.

  .main-content{
          display: flex;
          flex-direction: column-reverse;
          /*height: 70vh;      remove this*/
      }
  
      .left{
          /*height: 50vh;        remove this*/
          font-size: 0.9375rem;
          width: 100% ;
          padding: 1.875rem;
          margin: 0;
      }
  
  

  Next, two images were given. One for the mobile and the other for the desktop. Include the two images in the HTML file (give them two different classes to differentiate them and ease styling). In the styles.css file, display the mobile image as none in the desktop styles and after the media query (for mobile styles), display the desktop image as none and the mobile as block.

  In HTML

  <div id="right">
  
          <img src="images/image-header-desktop.jpg" class='desktop' alt="image-header-desktop">
          <img src="images/image-header-mobile.jpg" class='mobile' alt="image-header-mobile">
        
  </div> 
  

  In CSS

  /*Desktop design*/
   .desktop{
        /*add the other styles here*/
   }
    .mobile{
       display: none;      /*displays only with mobile width*/
  }
  
  /*mobile design*/
  @media (max-width: 48rem) {
      .mobile{
           display: block;  
           /*add the other styles here*/
       }
      .desktop{
           display: none;       /*displays only with desktop width*/
       }
  }
  

  Marked as helpful

  0

  ---

  

  Gilbert Ofori-Boye•90

  @GilbertWalkerPosted almost 2 years ago

  @Ambe-Mbong-Nwi Thank you for the tips, it was really helpful and easy to understand and implement. my mobile image is a little hidden to the top. is there something restricting it from properly aligning to container

  0

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @GIlbertWalker Sorry I have no idea on why that is happening I'm more versed with grid display.

  Try comparing your solution to that of others to see where the error comes from.

  0

  

  Gilbert Ofori-Boye•90

  @GilbertWalkerPosted almost 2 years ago

  @Ambe-Mbong-Nwi Okay thank you i apreaciate a lot

  0

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @GIlbertWalker You are welcome

  Marked as helpful

  0