Basic CSS with flexbox, grid and media query for responsiveness.

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  The screenshot is correct, you have css rules that are overwriting each other that result in things looking like in the screenshot. remove all the below css rules from the media query.

  @media only screen and (min-width: 1370px)
  .box4 {
      /* height: 38%; */
  }
  
  @media only screen and (min-width: 1370px)
  .box4 {
      /* position: absolute; */
      /* top: 285px; */
      /* left: 0px; */
      /* width: 48.9%; */
  }
  
  .box1 {
      /* align-self: flex-start; */
  }
  

  Also add a max-width: 1440px on the .container. hope this helps, let me know if you have any other question.

  0

  ---

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @hyrongennike Hey

  Thanks for the suggestions. I did as you said, but it is still the same. Nothing changed.

  @media only screen and (min-width: 1370px) .box4 { /* height: 38%; */ }

  @media only screen and (min-width: 1370px) .box4 { /* position: absolute; / / top: 285px; / / left: 0px; / / width: 48.9%; */ }

  .box1 { /* align-self: flex-start; */ }

  These media queries I am using them to make the left side two boxes of equal size and height. If I remove them, they become unequal.

  0