根据屏幕尺寸格式化特定部分

Question

所以我正在创建一个个人网站，除了一件烦人的事情，我几乎完成了。因此，每当我将屏幕尺寸减小到小于992px时，技能部分的格式就不合适了，一切看起来都不可读。我不明白为什么这只会在本节中发生。您可以在vanshbajaj.me上查看网站

.skills-section {
  background-color: #1a1e23;
  color: #fff;
}

.skills-section .section-title {
  color: #fff;
  margin-bottom: 110px;
}

.skills-section .section-title h2 {
  color: #fff;
}

.skill-title {
  width: 45%;
  float: left;
}

.skill-title h3 {
  font-size: 18px;
  font-weight: 400;
  margin-top: -6px;
  text-transform: capitalize;
}

.skill-progress {
  position: relative;
}

.progress {
  height: 10px;
  margin-bottom: 40px;
  background-color: #3a4149;
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
  width: 45%;
}

.progress-bar {
  background-color: #68c3a3;
}

.progress .progress-bar.six-sec-ease-in-out {
  -webkit-transition: width 6s ease-in-out;
  -moz-transition: width 6s ease-in-out;
  -o-transition: width 6s ease-in-out;
  transition: width 6s ease-in-out;
}

.skill-chart h3 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.our-progress {
  margin: 10px 0 30px;
}

.our-progress h3 {
  font-weight: 400;
  margin-bottom: 5px;
}

.progress-percent {
  margin-left: auto;
  margin-right: auto;
}


}
.skill-icon {
  width: 15%;
}
.skill-title {
  width: 55%;
}
.skill-title span,
.skill-title i {
  float: left;
  margin-top: -6px;
  line-height: 24px;
}
.skill-title i {
  margin-right: 4px;
}
.skill-title span {
  font-size: 18px;
  font-weight: 400;
  margin-top: -4px;
  text-transform: capitalize;
}
.skill-progress .progress {
  background-image: none;
}
.progress-bar span {
  position: absolute;
  top: -20px;
  right: 15px;
}
.progress-bar.six-sec-ease-in-out {
  background-image: linear-gradient(to bottom, #3b8269 0, #68c3a3 100%);
}
.progress .progress-bar.six-sec-ease-in-out {
  -webkit-transition: width 4s ease-in-out;
  -moz-transition: width 4s ease-in-out;
  -o-transition: width 4s ease-in-out;
  transition: width 4s ease-in-out;
}
.chart {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 40px auto;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  margin: auto;
  line-height: 140px;
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  z-index: 2;
}
.percent:after {
  content: '%';
}
.chart-text span {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  display: block;
  margin-top: 20px;
}
.angular {
  margin-top: 100px;
}
.angular .chart {
  margin-top: 0;
}
.chart .chart-text h3 {
  font-size: 22px;
}
.percent {
  font-size: 28px;
  font-weight: 500;
}
.chart-text span {
  font-size: 18px;
}

<section id="skills" class="skills-section section-padding">
  <div class="container">
    <h2 class="section-title wow">Skills</h2>

    <div class="skill-chart text-center">
      <h3>Technical</h3>
    </div>

    <div class="row">

      <div class="col-md-6">

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-python fa-rabbit"></i>
            <span>Python3</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
              <span>75%</span>
            </div>
          </div>
          <!--/ /.progress /-->
        </div>
        <!--/ /.skill-progress /-->

        <div class="skill-progress">
          <div class="skill-title">
            <i class="far fa-2x fa-fw fa-check-circle fa-rabbit"></i>
            <span>Django</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100">
              <span>56%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-node-js"></i>
            <span>C++</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
              <span>50%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-css3-alt"></i>
            <span>CSS3</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
              <span>68%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-html5"></i>
            <span>HTML5</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
              <span>90%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-fw fa-database fa-rabbit"></i>
            <span>MySQL</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
              <span>70%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-java fa-rabbit"></i>
            <span>Java</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="61" aria-valuemin="0" aria-valuemax="100">
              <span>61%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-js"></i>
            <span>JavaScript</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
              <span>65%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-git"></i>
            <span>Git</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
              <span>75%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-fw fa-chart-bar fa-rabbit"></i>
            <span>Matplotlib</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
              <span>85%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="far fa-2x fa-fw fa-check-circle fa-rabbit"></i>
            <span>Haskell</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100">
              <span>74%</span>
            </div>
          </div>
        </div>

      </div>
      <!--/ /.col-md-6 /-->



      <div class="col-md-6">

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-fw fa-chart-line fa-rabbit"></i>
            <span>Seaborn</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">
              <span>62%</span>
            </div>
          </div>
          <!--/ /.progress /-->
        </div>
        <!--/ /.skill-progress /-->

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-fw fa-chart-area fa-perl"></i>
            <span>Bokeh</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
              <span>45%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-node-js"></i>
            <span>D3.js</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
              <span>70%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-google fa-rabbit"></i>
            <span>GoogleCharts</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100">
              <span>92%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-ethereum"></i>
            <span>Solidity</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
              <span>65%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-rabbit fa-laptop-code"></i>
            <span>PyCharm</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
              <span>90%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-fw fa-circle-notch"></i>
            <span>Jupyter Notebook</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100">
              <span>81%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-microsoft"></i>
            <span>Visual Studio Code</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100">
              <span>82%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-ubuntu"></i>
            <span>Linux</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100">
              <span>87%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fab fa-2x fa-fw fa-windows"></i>
            <span>Windows</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100">
              <span>91%</span>
            </div>
          </div>
        </div>

        <div class="skill-progress">
          <div class="skill-title">
            <i class="fas fa-2x fa-fw fa-chart-pie fa-rabbit"></i>
            <span>Pandas</span>
          </div>
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100">
              <span>74%</span>
            </div>
          </div>
        </div>


      </div>
      <!--/ /.col-md-6 /-->

    </div>
    <!--/ /.row /-->
    <div class="skill-chart text-center">
      <h3>Other Skills</h3>
    </div>

    <div class="row more-skill text-center">

      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="chart" data-percent="90" data-color="2ecc71">
          <span class="percent">90</span>
          <div class="chart-text">
            <span>Communication</span>
          </div>
          <canvas height="140" width="140"></canvas>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="chart" data-percent="85" data-color="2ecc71">
          <span class="percent">85</span>
          <div class="chart-text">
            <span>Creativity</span>
          </div>
          <canvas height="140" width="140"></canvas>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="chart" data-percent="95" data-color="3498db">
          <span class="percent">95</span>
          <div class="chart-text">
            <span>Commitment</span>
          </div>
          <canvas height="140" width="140"></canvas>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="chart" data-percent="90" data-color="3498db">
          <span class="percent">90</span>
          <div class="chart-text">
            <span>Priotizing Skills</span>
          </div>
          <canvas height="140" width="140"></canvas>
        </div>
      </div>

    </div>

  </div>
  <!--/ /.container /-->
</section>

预期结果是，每当屏幕尺寸减小时，所有技能都将显示在一列而不是两列中。

Answer 1

添加媒体查询

@media only screen and (max-width: 990px) {
  /*increase font size of the elements
  which are looking small*/ 

}