Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Omar Bahaa
PLUS
Omar Bahaa
Courses Plus Student 1,801 Points
Posted by Omar Bahaa
Omar Bahaa
Courses Plus Student 1,801 Points

Media query is not being applied

Media query for mobile versions are not being applied or even show when i inspect an element

@media only screen and (max-width:414px) and (min-width:320px) { #bobo{ background-size: contain; padding-top: 265px; background-position: center; margin-top: -2%; }

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--    <link rel="stylesheet" type="text/css" media=(max-width: 767px) and (min-width:320px) href="css/style.css" />-->
    <title>Misr-Insurance</title>
</head>

<body>

    <!-- Start container div -->

    <div class="container-fluid">

        <div class="row my-row">
            <div class="col-lg-6 col-sm-12">
                <img src="img/wa7wa722.jpg" style="margin-top:5%;margin-left: 5%">

<!--
                <span class="Contact ml-auto rcorners3 ">19447 </span>

                <span class="contact-us">اتصل بنا <img class="phone" src="img/phone-call.png" style="width: 15px; height: 15px"></span>
-->

                <img class="main-img img-fluid mx-auto d-block mt-5" style="width: 75%;" src="img/hero-img.png">

            </div>


            <div class="col-lg-6 col-sm-12">
                <div class="row my-row">
                    <img class="  float-left mx-auto logo"  src="img/hello.png" style="margin-top: 1%;">
                </div>

                <div class="second-section text-center">
                    <br>

                    <h4>
                        حياة أفضل لاسرتك مع مصر لتأمينات الحياة
                    </h4>

                    <h2 class="font-weight-bold">.... بكره يبدأ النهارده</h2>
                    <h3 class="rcorners1 col-md-6 col-10 ">وثيقة مصر - استثمار</h3><br>

                    <p class="main-content">تقدم الشركة هذة الوثيقة فى شكل برنامج تأمينى يوفر الحماية <br>التأمينية و ايضا الادخار للحصول على مبلغ من المال<br>

                        بالاضافة الى الارباح لمواجهة الاعباء المالية فى المستقبل</p>

                </div>

            </div>

        </div>
            </div>


        <!--start section2-->

        <div class="row">
            <div class="col-lg-12 split offset-lg-6 " style="text-align: center">
               <div class="split-img img-fluid">
                <img src="img/Capture.PNG" style="width: 55px; height: 30px; "></div>

            </div>

        </div>




<!--            <div class="col-lg-6 my-col-link" style="padding-top: 80px;">-->

<!--                <div class="embed-responsive embed-responsive-16by9 my-link">-->
<!--                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/1rTWm_abR_4"></iframe>-->
<!--                </div>-->


<!--            </div>-->

<!--
           <div class="row my-row2 d-flex justify-content-between">
            <div class="col-lg-6 my-form float-right ">
                <form>
                    <div class="my-title" style="text-align: center;"><p>للتقديم على الوثيقة ادخل بياناتك</p></div>
                    <p class="font-size:2vw; still">للتقديم على الوثيقة ادخل بياناتك</p>



                    <div class="form-group row">

                        <label for="colFormLabel" class="col-sm-1 col-form-label col-form-label-sm"></label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control form-control mx-auto" id="colFormLabelSm" placeholder="الاسم">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="colFormLabel" class="col-sm-1 col-form-label"></label>
                        <div class="col-sm-11">
                            <input type="number" class="form-control mx-auto" id="colFormLabel" placeholder="السن">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="colFormLabel" class="col-sm-1 col-form-label col-form-label-lg"></label>
                        <div class="col-sm-11">
                            <input type="number" class="form-control form-control mx-auto" id="colFormLabelLg" placeholder="الموبايل">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="colFormLabel" class="col-sm-1 col-form-label col-form-label-lg"></label>
                        <div class="col-sm-11">
                            <input type="email" class="form-control form-control mx-auto" id="colFormLabelLg" placeholder="الإيميل">
                        </div>
                         <button type="button" class="btn btn-success btn- block mx-auto my-button rcorners2" data-toggle="button" aria-pressed="true"> سجل الآن</button>-
                    </div>

                </form>


            </div>
-->

<!--        </div>-->




    <!--new section-->

    <div class="section" style="background-color: #c4c4c4">
    <div class="container">
    <div class="row ">

       <div align="center" class="embed-responsive embed-responsive-16by9  col-md-5 col-12">
    <video controls autoplay loop class="embed-responsive-item " style="width: 100%; height: auto;margin-top: -8%;">
        <source src="video/wa7wa7.mp4" type="video/mp4">
    </video>
</div>
        <div class="col-2"></div>

    <div class="col-md-5 col-12 img-fluid" id="bobo" style="background-image: url(img/abanoub.jpg); background-repeat: no-repeat; background-size: contain; padding-top: 70px;
padding-bottom: 35px;
background-position: center; margin-top: -2%; "></div>

    </div>

        </div>
    </div>



    <footer></footer>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/script.js"></script>



</body>

</html>

/*Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { sm}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { md}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { lg }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px){xl}*/



html, body {width: auto!important;     font-family: 'Cairo', sans-serif;
 overflow-x: hidden!important} 



.my-fcol {
    padding-top: 20px;


}



.my-row {
    background-color: #D7D7D9;
}

.my-row2 {
    background-color: #C4C4C4;
    height: auto;
}



.my-card {
    border: 1px solid rebeccapurple;
    break-inside: avoid-column;
    text-align: right;

}

.logo {
/*    margin-right: 40px;*/
    max-height: 120px;
    max-width: 220px;
/*    padding-top: 10px;*/
}

.Contact {
    color: #D7D7D9;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 20px;
}

h4 {
    color: #502968;





}


.logo {
    height: 120px;
}

h2 {
    color: #0FB373;
}

h3 {
    word-spacing: 10px;
    color: #D7D7D9;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: bold;

}

.main-content {
    font-size: 15px;
    color: #502968;
    font-weight: bold;
}

.frame {
    margin: 65px;
}

.my-link {
    width: 450px;
    height: 250px;
}

.phone {
    width: 20px;
    height: 20px;
}

.contact-us {
    font-size: 15px;
    color: rebeccapurple;

}

footer {
    background-color: #D7D7D9;

    height: 60px;
    margin: auto;
}

.split{
    background-color:#C4C4C4; 
    margin: auto;

}

.split-img{
    width: auto;
    height: auto;
    background-color:#C4C4C4; 
}

input[type='text'] {
    text-align: right;
    width: 250px;
    margin-right: 100px;

}

input[type='number'] {
    text-align: right;
    width: 250px;
    margin-right: 100px;

}

input[type='email'] {

    text-align: right;
    width: 250px;
    margin-right: 100px
}

.my-button {
    width: 250px;
    font-weight: bold;
    font-size: 22px;
    height: 50px;
    margin-right: 100px;

}


.rcorners1 {
    border-radius: 25px;
    background: #502968;
    padding: 2%;
/*    width: 70%;*/
    height:auto;
  text-align: center;
   margin:auto;

}

.my-form {

/*
    padding-top: 70px;
    padding-bottom: 35px;
*/
    background-image: url(../img/landingpage%5B566%5D.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: -2%;

}



.my-title {
    color: white;
    font-size: 100%;
    margin-bottom: 0%;
}



.rcorners2 {
    border-radius: 25px;
    text-align: center;
    background-color: #0FB373;

}

.rcorners3 {
    border-radius: 25px;
    background: #07605A;
    width: 50px;
    height: 30px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;



}

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }

    iframe {
        padding-right: 50px;
    }

.my-col-link{
        padding-bottom: 50px;
    }
}

/*
@media (max-width:414px) {

    .rcorners1 {
        width: 250px;
        height: 50px;
    }
*/

    h3 {
        word-spacing: 10px;
        color: #D7D7D9;
        font-size: 20px;
    }

    .logo {
        margin: auto;
    }

    input[type='text'] {
        text-align: right;
        width: 250px;
        height: 20px;
        margin: -12px;
        font-size: 12px;

    }

 input[type='number'] {
        text-align: right;
        width: 250px;
        height: 20px;
        margin: -12px;
        font-size: 12px;


    }


    input[type='email'] {

        text-align: right;
        width: 250px;
        margin: -12px;
        height: 20px;
        font-size: 12px;

    }

    .my-button {
        width: 250px;
        font-weight: bold;
        font-size: 10px;
        height: 50px;
/*        height: 25px;*/
    }
    .my-title{
        font-size: 17px;
        margin: -12px;
    }
     .my-link{

/*
    height: auto;
        padding: none;
        width: 112%;
        margin: auto;

*/
    }



@media (max-width:375px) {
    input[type='text'] {
        text-align: right;
        width: 180px;
        margin:-12px;
        height: 15px;
        font-size: 12px;


    }

     input[type='number'] {
        text-align: right;
        width: 180px;
        margin:-12px;
        height: 15px;
        font-size: 12px;


    }

    input[type='email'] {

        text-align: right;
        width: 180px;
        margin:-12px;
        height: 15px;
        font-size: 12px;

    }

    .my-button {
        width: 150%;
        font-weight: bold;
/*        font-size: 10px;*/
/*        height: 25px;*/
        margin-right: 40px;

    }

    .my-col-link{
        padding:none;
    }

    .my-link{
    height: auto;
        padding: none;
        width: 114%;
        margin: auto;
    }

    .my-title{
        margin: -12px;
        font-size:15px;
    }




}

@media (max-width:320px) {

    input[type='text'] {
        text-align: right;
        width: 200px;
        height: 7px;
        font-size: 10px;

        margin: -12px;



    }

       input[type='number'] {
        text-align: right;
        width: 200px;
        height: 7px;
        font-size: 10px;

        margin: -12px;



    }

    input[type='email'] {

        text-align: right;
        width: 200px;

        height: 7px;
        font-size: 10px;
        margin: -12px;


    }

    .my-button {
        width: 210px;
        font-weight: bold;
        font-size: 11px;
        height: 27px;


    }

    .my-col-link{
        padding-bottom: 50px;
    }
    .my-title{
        font-size: 10px;
        padding-top: 15px;
        margin: -12px;

    }

    .my-link{
    height: auto;
        padding: none;
        width: 117.5%;
        margin: auto;
    }


}

@media only screen and (max-width: 800px) and (min-width: 768px) {
    input[type='text'] {
        text-align: right;
        width: 300px;
        margin-right: 200px;

    }

        input[type='number'] {
        text-align: right;
        width: 300px;
        margin-right: 200px;

    }

    input[type='email'] {

        text-align: right;
        width: 300px;
        margin-right: 200px;
    }

    .my-button {
        width: 300px;
        font-weight: bold;
        font-size: 22px;
        height: 50px;
        margin-right: 200px;

    }

    .my-col-link{
        padding-bottom: 50px;
    }

    .second-section{
        margin: auto;
    }

    .mx-auto {
 margin-right: auto !important;
 margin-left: auto !important;
}
    .my-title{
        font-size: 22px;
    }


  .my-link{
    height: auto;
        padding: none;
        width: 100%;
        margin: auto;
    }

}


.still{
    margin-left: 36%;
    color: white;
    margin-top: 4%;
}
@media screen and (min-width: 601px) {
  .still {
    font-size: 100%;
  }
}
@media screen and (max-width: 600px) {
  div.example {
    font-size: 90%;
  }
}

/*
@media (max-width:320px) {

    input[type='button'] {

    }
    @media (max-width:414px) {

        .mek{
            max-width: 50%;
        }

        }
*/

/*
    @media(max-width:375px){
        #bobo{
    background-size: contain;
    padding-top: 265px;
    background-position: center;
    margin-top: -2%;
}
}
        }
    }
*/
@media only screen and (max-width:414px) and (min-width:320px) {
    #bobo{
    background-size: contain;
    padding-top: 265px;
    background-position: center;
    margin-top: -2%;
    }



    }
Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

To make it easier for folks to replicate and analyze the issue, and to avoid needing to paste in a large amount of code, you might want to make a snapshot of your workspace and post the link to it here.

1 Answer

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Hi Omar,

It's difficult to review without having all your pieces (js, images and videos), Probably easier with a smaller workable test scenario.,

After changing a couple of things, your media query appears to work:

  1. Fix the errors where you set padding to "none" - should be 0.
  2. Used a substitute photo for your .jpg's
  3. Commented out the popper.js and the video div
  4. Added border: 2px solid crimson; to your @media at the bottom for #bobo

Then when inspecting with a small enough screen I could see the red border created.