所以我正在创建一个个人网站，除了一件烦人的事情，我几乎完成了。因此，每当我将屏幕尺寸减小到小于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>
预期结果是，每当屏幕尺寸减小时，所有技能都将显示在一列而不是两列中。
答案 0 :(得分：0)
添加媒体查询
@media only screen and (max-width: 990px) {
/*increase font size of the elements
which are looking small*/
}