"responsive design"

responsive design.css

  @media screen and (max-width: 1800px) {
    #results {
      width: 75%;
      margin-left: calc(25% / 2);
    }
  }

  @media screen and (max-width: 1700px) {
    #results {
      width: 80%;
      margin-left: 10%;
    }
  }

  @media screen and (max-width: 1600px) {
    #results {
      width: 85%;
      margin-left: calc(15% / 2);
    }
  }

  @media screen and (max-width: 1500px) {
    #results {
      width: 90%;
      margin-left: 5%;
    }
  }

  @media screen and (max-width: 1400px) {
    #results {
      width: 95%;
      margin-left: calc(5% / 2);
    }
  }

  @media screen and (max-width: 1340px) {
    #results {
      width: 80%;
      margin-left: 10%;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  @media screen and (max-width: 1260px) {
    #results {
      width: 85%;
      margin-left: calc(15% / 2);
    }
  }

  @media screen and (max-width: 1190px) {
    #results {
      width: 90%;
      margin-left: 5%;
    }
  }

  @media screen and (max-width: 1120px) {
    #results {
      width: 95%;
      margin-left: calc(5% / 2);
    }
  }

  @media screen and (max-width: 1060px) {
    #results {
      width: 75%;
      margin-left: calc(25% / 2);
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  @media screen and (max-width: 1010px) {
    #results {
      width: 80%;
      margin-left: 10%;
    }
  }

  @media screen and (max-width: 940px) {
    #results {
      width: 85%;
      margin-left: calc(15% / 2);
    }
  }

  @media screen and (max-width: 890px) {
    #results {
      width: 90%;
      margin-left: 5%;
    }
  }

  @media screen and (max-width: 840px) {
    #results {
      width: 95%;
      margin-left: calc(5% / 2);
    }
  }