Responsive webpage with media queries

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, excellent work with your solution! You can use mix-blend-mode and opacity instead of filter to get closer to design and achieve it with less tries like:

  .img-container{
      background-color: hsl(277, 64%, 61%);
  }
  /* You should add a class name to your container <div> */
  
  .image1{
      ...
      opacity: .7;
      mix-blend-mode: multiply;
  }
  

  As you've noticed design starts breaking between 375px - 1440px. Without needing to change your style much you can simply edit media queries as:

  @media screen and (max-width: 900px) {
  
  ...
  
  }
  
  @media screen and (min-width: 900px) {
  
  ...
  
  }
  

  The reason I've changed 375 to 900 is because content overflows in between so 900px is safer. Also this setup of media-query won't be the right approach but at least you fix your issues with little effort.

  My suggestion would be to design mobile version first as your default CSS. Then from there when you need to add a breakpoint simply add it like @media screen and (min-width: 680px) {...}. Whatever you add to style for the media-query, will apply for screens wider than 680px. If you need another breakpoint at 1200px simply add media-query min-width 1200px. One little note about media-query is, whatever you add to media-query overrides the default but rest stays the same. For example:

  div {
    background-color: blue;
    max-width: 500px;
  }
  
  @media screen and (min-width: 680px) {
    div {
      max-width: 900px;
    }
  }
  

  Width changes but background-color stays same. So you don't need to re-define the properties that's not changing. Hope these helps fixing your issues, happy coding :)

  Marked as helpful

  1