M thaker
Reputation: 393
flex-start does not work in the layout inside the main one
@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>Here, for #about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 .q-jyoti-text in my mobile layout, even if I provide display:flex, flex-direction:row,align-content:flex-start , the content remains in the center. Apparently the content is not affected by any of these flags. What should I do to make them left-aligned just like text in #about-us .q-team .q-team-layout .q-j-h-layout .q-jyoti-layout .x1 .x1-mob. If it is not visible by running code snippet you can check kraftdigital.in, from there in mobile design you can clearly see the difference.The screenshot my problem is 
Upvotes: 0
Views: 695
Answers (1)
Shruti Agarwal
Reputation: 897
Try removing the style : "align-items: center;" from your class on small screen size and check. You can add it only on big screens by using media queries like this :
@media screen and (min-width: 481px) {
.q-team {
align-items: center
}
}
** Note : Remove this style from the class q-team.
PS : You can just inspect the website "kraftdigital.in" and remove the above mentioned style from class "q-team". It works for me !
Please let me know in comments below if this doesnt help.
Upvotes: 1
Related Questions
- flex property not working for nested div tag
- Flexbox flex-start does not working within flex container
- Why won't my justify-content: start work for Flexbox?
- Flex box is not working
- display: flex not working in CSS
- CSS and Flexbox layout issue
- CSS Flex Not Working
- Cannot get flex-end to work properly
- Why is my flexbox not working correctly?
- Flexbox call not working