Question

@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;">&#9679;  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;"> &#9679; 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;"> &#9679; 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;">&#9679; 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

Answer 1

尝试删除样式：＆＃34; align-items：center;＆＃34;从您的班级小屏幕尺寸和检查。您可以通过使用这样的媒体查询仅在大屏幕上添加它：

@media screen and (min-width: 481px) {
 .q-team {
       align-items: center
  }
}

** 注意：从q-team类中删除此样式。

PS：您可以查看网站＆＃34; kraftdigital.in＆＃34;并从班级＆＃34; q-team＆＃34;中删除上述风格。它对我有用！

如果没有帮助，请在下面的评论中告诉我。

flex-start does not work in the layout inside the main one

1 个答案: