@media only screen and (max-width: 500px) {
html {
font-size: 10px !important;
}
.container {
height: auto;
}
header {
width: 100%;
background: #ffffff;
height: 50px;
display: block;
line-height: 60px;
}
.carousel-indicators li.active {
width: 1.8rem;
height: 1.8rem;
margin-right: 1.2rem;
}
.carousel-indicators li {
width: 1.8rem;
height: 1.8rem;
margin-right: 1.2rem;
}
.hamburger {
background: none;
position: absolute;
top: 0;
right: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: black;
border: 0;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
right: 0;
padding: 5px 15px 0px 15px;
color: #999;
border: 0;
font-size: 3em;
line-height: 65px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
display: block;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
}
span {
padding-left: 20px;
}
a {
color: #336699;
}
.container #myCarousel .carousel-inner .item {
width: 100%;
height: auto;
}
#q-nav {
display: none;
}
span {
padding: 0;
margin: 0;
}
.q-intro-text {
padding-top: 10rem;
height: 23%;
}
.q-intro-text .q-mobile-app-text {
margin: 0 0 0 1rem;
color: #ffffff;
}
#about-us .q-about-us-layout {
height: 95rem;
margin: 0 auto;
width: 75%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#about-us .q-about-us-layout .q-about-us-text {
position: relative;
margin-top: 1.4rem;
color: #898989;
font-size: 1.4rem;
}
#about-us .q-about-us-layout .q-about-us-images {
position: relative;
margin-top: 2rem;
margin-bottom: 0rem;
width: 100%;
height: 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#about-us .q-about-us-layout .test {
margin-top: 1rem;
margin-bottom: 2rem;
width: 100%;
height: 22rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#about-us .q-about-us-layout .test1 {
width: 100%;
height: 35rem;
margin-top: 2rem;
background-color: white;
color: #898989;
}
#about-us .q-about-us-layout .q-about-us-images #q-image1 {
width: 100%;
height: 9rem;
margin-bottom: 2rem;
}
#about-us .q-about-us-layout .q-about-us-images #q-image2 {
width: 100%;
height: 9rem;
}
#about-us .q-about-us-layout .test #q-image3 {
width: 100%;
height: 13rem;
margin-bottom: 2rem;
}
#about-us .q-about-us-layout .test #q-image4 {
width: 100%;
height: 9rem;
}
#about-us .q-about-us-layout .q-about-us-images #q-image1 .q-images-text {
margin-top: 1rem;
color: #898989;
font-size: 1.5rem;
font-weight: bold;
}
#about-us .q-about-us-layout .q-about-us-images #q-image2 .q-images-text {
margin-top: 1rem;
font-size: 1.5rem;
color: #898989;
font-weight: bold;
}
#about-us .q-about-us-layout .test #q-image3 .q-images-text {
margin-top: 1rem;
font-size: 1.5rem;
color: #898989;
font-weight: bold;
}
#about-us .q-about-us-layout .test #q-image4 .q-images-text {
margin-top: 1rem;
font-size: 1.5rem;
color: #898989;
font-weight: bold;
}
#about-us .q-about-us-layout .q-about-us-images #q-image1 .q-images {
width: 60%;
height: 60%;
}
#about-us .q-about-us-layout .q-about-us-images #q-image2 .q-images {
width: 60%;
height: 60%;
}
#about-us .q-about-us-layout .test #q-image3 .q-images {
width: 60%;
height: 60%;
}
#about-us .q-about-us-layout .test #q-image4 .q-images {
width: 50%;
height: 50%;
}
#about-us .q-about-us-layout .test #q-image3 #q-code {
width: 50%;
height: 50%;
}
#about-us .q-team {
height: 79rem;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 2rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f6f6f6;
}
#about-us .q-team .q-team-text {
font-size: 1.5rem;
font-weight: bold;
margin-top: 1rem;
margin-bottom: 2rem;
color: #448ccb;
}
#about-us .q-team .q-team-intro {
margin: 0 3.5rem 0 3.5rem;
font-size: 1.4rem;
color: #898989;
}
#about-us .q-team .q-team-layout {
margin-top: 3rem;
padding: 0 0rem 0 0rem;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#about-us .q-team .q-team-layout .q-j-h-layout {
display: flex;
flex-direction: column;
padding: 0 0 0 0;
margin-bottom: 0rem;
margin-top: 0rem;
background-color: #f6f6f6;
}
#about-us .q-team .q-team-layout .q-m-v-layout {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #f6f6f6;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout {
width: auto;
height: 12rem;
margin: 0 1rem 1rem 1rem;
padding-left: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .q-jyoti-info {
display: none;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout {
width: auto;
height: 15rem;
margin: 0 1rem 1rem 1rem;
padding-left: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .q-hari-info {
display: none;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout {
width: auto;
height: 13rem;
margin: 0 1rem 1rem 1rem;
padding-left: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .q-mrugesh-info {
display: none;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout {
height: 12rem;
width: auto;
margin: 0 1rem 1rem 1rem;
padding-left: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .q-vivek-info {
width: 60%;
height: 100%;
display: none;
background-color: #f6f6f6;
}
#about-us .q-team .q-team-layout .q-abhimanu-layout {
width: 100%;
height: 10rem;
margin-right: 10px;
padding-left: 7rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#about-us .q-team .q-team-layout .q-abhimanu-layout .q-abhi-info {
position: absolute;
width: 60%;
height: 100%;
display: none;
background-color: #f6f6f6;
box-shadow: 3px 3px 3px 3px #898989;
top: 0;
z-index: 3;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .q-team-images {
width: auto;
height: 8.4rem;
padding-bottom: 1rem;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .q-name {
display: none;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .q-desig {
display: none;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .q-team-images {
width: auto;
height: 8.4rem;
padding-bottom: 1rem;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .q-name {
display: none;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .q-desig {
display: none;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .q-team-images {
width: auto;
height: 8.4rem;
padding-bottom: 1rem;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .q-desig {
display: none;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .q-name {
display: none;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .q-team-images {
width: auto;
height: 8.4rem;
padding-bottom: 1rem;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .q-desig {
display: none;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .q-name {
display: none;
}
#about-us .q-team .q-team-layout .q-abhimanu-layout .q-team-images {
width: auto;
height: 8.4rem;
padding-bottom: 1rem;
}
#about-us .q-team .q-team-layout .q-abhimanu-layout .q-name {
display: none;
}
#about-us .q-team .q-team-layout .q-abhimanu-layout .q-desig {
display: none;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 {
display: block;
display: flex;
flex-direction: column;
margin-left: 2rem;
width: 100%;
height: 40%;
align-self: flex-start;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 .x1-mob {
display: flex;
height: 8rem;
flex-direction: row;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 .q-jyoti-text {
width: 100%;
height: auto;
background: black;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .x2 {
display: block;
display: flex;
flex-direction: column;
margin-left: 2rem;
width: 100%;
height: 20%;
align-self: flex-start;
align-items: flex-start;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .x2 .q-hari-text {
width: 100%;
height: auto;
}
#about-us .q-team .q-team-layout .q-j-h-layout .q-hari-layout .x2 .x2-mob {
display: flex;
height: 8rem;
flex-direction: row;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .x3 {
display: block;
display: flex;
flex-direction: column;
margin-left: 2rem;
width: 100%;
height: 30%;
align-self: flex-start;
align-items: flex-start;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .x3 .q-mrugesh-text {
height: auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-mrugesh-layout .x3 .x3-mob {
display: flex;
height: 8rem;
flex-direction: row;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .x4 {
display: block;
display: flex;
flex-direction: column;
margin-left: 2rem;
width: 100%;
height: 30%;
align-self: flex-start;
align-items: flex-start;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .x4 .q-vivek-text {
width: 100%;
}
#about-us .q-team .q-team-layout .q-m-v-layout .q-vivek-layout .x4 .x4-mob {
display: flex;
width: 100%;
height: 2rem;
flex-direction: row;
}
}<div id="about-us">
<div class="q-about-us-layout">
<div class="q-about-us-title"> OUR PHILOSOPHY </div>
<div class="q-about-us-text"> We believe in committing ourselves to deliver the confluence of best from the world of design and technology. We base our work on four pillars. </div>
<div class="q-about-us-images">
<div id="q-image1">
<img class="q-images" src="../test/images/icons-05.svg" alt="slider" onerror="this.src='../test/images/slider1.png'">
<div class="q-images-text"> WHOLESOME CLIENT INTERACTION </div>
</div>
<div id="q-image2">
<img class="q-images" src="../test/images/icons_pdt_dev.svg" alt="slider" onerror="this.src='../test/images/slider1.png'">
<div class="q-images-text"> AGILE PRODUCT MANAGEMENT </div>
</div>
</div>
<div class="test">
<div id="q-image3">
<img class="q-images" id="q-code" src="../test/images/icons_clean_responsive.svg" alt="slider" onerror="this.src='../test/images/slider1.png'">
<div class="q-images-text"> CRISP AND INNOVATIVE DESIGN </div>
</div>
<div id="q-image4">
<img class="q-images" id="q-code" src="../test/images/icons_coding.svg" alt="slider" onerror="this.src='../test/images/slider1.png'">
<div class="q-images-text"> CUTTING EDGE TECHNOLOGY </div>
</div>
</div>
<div class="test1">
We believe that a world class product cannot be brought into life without the complete exchange of sensibilities and perspectives from both the ends. We are sure that a product/service, that needs to be delivered, can be only understood comprehensively,
if we are subjecting ourselves equally to understand our client. Through a symbiotic review process of constant interaction, we perfect the quality of our service and product.A team of avant-garde designers make sure that they bring in
a whiff of fresh air in every single nuance of creativity, while the engineering team engages itself to bring the subtlety and the madness of these ubiquitous designs into life.
</div>
</div>
<div class="q-team">
<div class="q-team-text">THE TEAM </div>
<div class="q-team-intro">At kraftdigital,our team of experienced designers ,developers and managers will make sure you get exactly what you're looking for .What if you don't know what exaclty you are looking for?Worry not, we have got you covered
</div>
<div class="q-team-layout">
<div class="q-j-h-layout">
<div class="q-jyoti-layout">
<img class="q-team-images" src="../test/images/jyoti.png" alt="Los Angeles">
<div class="q-name">Jyotirmoy</div>
<div class="q-desig">CEO</div>
<div class="x1">
<div class="x1-mob">
<span style="color:#ff363f;font-weight:bold;margin-right:1rem;"> Jyotirmoy </span>
<span style="color:#4d4d4d;">● CEO</span>
</div>
<div class="q-jyoti-text">
Lives in Gurgaon.Has spent 6 years in various multinational companies executing and ideating for new age projects.
</div>
</div>
<div class="q-jyoti-info">Lives in Gurgaon. Has spent 6 years in various multinational companies executing and ideating for new age projects.</div>
</div>
<div class="q-hari-layout">
<img class="q-team-images" src="../test/images/hari.png" alt="Los Angeles">
<div class="q-name">Hariprasad</div>
<div class="q-desig">Design head</div>
<div class="x2">
<div class="x2-mob">
<span style="color:#ff363f;font-weight:bold;margin-right:1rem;"> Hariprasad </span>
<span style="color:#4d4d4d;"> ● Design Head </span>
</div>
<div class="q-hari-text">Lives in Gurgaon.Has spent 7 years in the creative design and branding industry, providing services to a host of heavy-weight clients.</div>
</div>
<div class="q-hari-info">Lives in Gurgaon.Has spent 7 years in the creative design and branding industry, providing services to a host of heavy-weight clients.</div>
</div>
</div>
<div class="q-m-v-layout">
<div class="q-mrugesh-layout">
<img class="q-team-images" src="../test/images/vivek.png" alt="Los Angeles">
<div class="q-name">Vivek Anand</div>
<div class="q-desig"> Operations head</div>
<div class="x3">
<div class="x3-mob">
<span style="color:#ff363f;font-weight:bold;margin-right:1rem;"> Vivek Anand</span>
<span style="color:#4d4d4d;"> ● Operation Head </span>
</div>
<div class="q-mrugesh-text">Lives in Seattle.Has spent 6 years in the data analytics industry, covering multiple locations in the United States.</div>
</div>
<div class="q-mrugesh-info">Lives in Seattle.Has spent 6 years in the data analytics industry, covering multiple locations in the United States.</div>
</div>
<div class="q-vivek-layout">
<img class="q-team-images" src="../test/images/mrugesh.png" alt="Los Angeles">
<div class="q-name">Mrugesh</div>
<div class="q-desig">Tech lead</div>
<div class="x4">
<div class="x4-mob">
<span style="color:#ff363f;font-weight:bold;margin-right:1rem;"> Mrugesh </span>
<span style="color:#4d4d4d;">● Tech lead </span>
</div>
<div class="q-vivek-text">Lives in Gurgaon.Has a post graduation degree in technology and comprehensive working knowledge of the tech industry.</div>
</div>
<div class="q-vivek-info">Lives in Gurgaon.Has a post graduation degree in technology and comprehensive working knowledge of the tech industry.</div>
</div>
</div>
</div>
</div>在这里，对于 #about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 .q-jyoti-text 在我的 移动布局，即使我提供了 display:flex, flex-direction:row,align-content:flex-start ，内容仍然在中心。显然，内容不受任何这些标志的影响。我应该怎么做才能使它们像 #about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 .x1-mob 中的文本一样左对齐。如果通过运行代码片段看不到它，您可以检查 kraftdigital.in，从那里在移动设计中您可以清楚地看到差异。屏幕截图我的问题是 
最佳答案
尝试移除样式:“align-items: center;”从你的类(class)在小屏幕尺寸和检查。你可以通过使用这样的媒体查询只在大屏幕上添加它:
@media screen and (min-width: 481px) {
.q-team {
align-items: center
}
}
** 注意:从类 q-team 中删除此样式。
PS:您可以检查网站“kraftdigital.in”并从类“q-team”中删除上述样式。 它对我有用!
如果这没有帮助，请在下面的评论中告诉我。
关于html - flex-start 在主布局中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44564987/