Frontend Mentor Stats Preview - First responsive project

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image to match the color, I did something like this, I hope that helps, sizes might not fit your solutions but you can adapt it depending to your own code:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  0
• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  To be honest i dont think media queries is that hard because its just means that'' for certain type of width of viewport just do this properties ''...there are different ways of writing a media query ...for example in the mobile first approach (design mobile version first and add a media query for large screens) i use h1{font-size:1.5rem;} since for mobiles it should be smaller size but when a screen size greater than 864px(breakpoint[it means that ur design when it starts become ugly...it is not fixed value depends on a design ]) so i write a media query(by the way a @media query is not only used for screen sizes but also have different good uses but since u asked about screen sizes lets continue )....so it starts with screen and (min-width) i know these will confuse u ....but it means that that media query properties will be applied to a screens >864px....and if i use max-width it means <864px .....

  @media screen and (min-width: 864px) { 
     h1 { 
       font-size: 2.9rem; 
     }
  

  U can also write a media query in between just like these (min-width:864px and max-width:1024px) ...that media query will be applied to screens greater than 864px but less than 1024px (after 1024px it will not work since it is the max boundary )...ask me if anything is not clear

  Marked as helpful

  0

  ---

  

  Ric•210

  @Ripra87Posted almost 2 years ago

  @yishak621 Thank you Yishak, yeah i read a bit about it on w3s but your explanation is more clear, now i understand how it works! Just to be sure i understand good, so every component that should be resized in the page must have in the css 2 values, one that is "the main" and the second with @media with the other size? And another question ) i also read about mobile first, in this case i should write the "main css" with the dimension of the mobile screen and add the queries for the desktop version, right? Thank you so much )

  0

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @Ripra87 i'm glad u ask the question about ''what to write in a media query?" ..so the answer will be u only write a media query for the properties that you want to change but if the property is not gonna change then u don't have to write because it will be redundancy ...since it will inherited from the property u written before....to make it clear lets see it with example....for example for these status preview card component i use mobile first approach the container of the card (.container) will have these properties grid with 1 column and 2 rows

  /*container*/ 
   .container { 
     display: grid; 
     grid-template-columns: 1fr; 
     grid-template-rows: 0.5fr 1fr; 
     margin: 0 4vw; 
     border-radius: 8px; 
     overflow: hidden; 
   }
  

  But for the large screens i want to change 1]the grid-template-column 2]the grid-template-rows So i only change these properties value so i don't have to retype the others since it will be the same (inherited)for both screen sizes ..as u can see below not only i change a property values i also added a new properties for large screens like text-align justify-content that will be applied only for >864px.. So it look like these for large screens

  @media screen and (min-width: 864px) { 
     .container { 
       grid-template-columns: 1fr 1fr; 
       grid-template-rows: 39rem; 
       max-width: 95rem; 
       text-align: left; 
       justify-content: space-between; 
     }
  

  So the second answer will be yes the mobile approach is a good and most commonly used approach first u design for mobile version and then like i did in the above example u can reassign the property value or add a new property with value for large screens

  Marked as helpful

  0

  

  Ric•210

  @Ripra87Posted almost 2 years ago

  @yishak621 Thank you Yishak, now is all clear, i try in the next project to do the mobile version too, trying to start from it!

  1