CSS media queries not working, everything I type doesn't work?

StackOverflow https://stackoverflow.com/questions/23650133

  •  22-07-2023
  •  | 
  •  

Pregunta

I am here just to ask a quick question.. I am trying to use CSS media queries in order to make my current website compatable with mobile devices, however everything I type in seems to not make any kind of difference? I really am new to CSS at the moment.

Here is my HTML

<html>

<head>

<!--<link href="styles.css" rel="stylesheet" type="text/css">-->

</head>
<title>Cochranes Law Firm</title>
<body>

    <div id="wrapper">
        <div id="header">
            <img src="images/logo.png">
            <div id="nav">

                <div id="Search">
                    <input type="text" name="Search"> <img
                        src="images/search.png" class="mag">
                </div>
                <ul>
                    <li class="Home"><a href="#">Home </a></li>
                    <li class="About"><a href="#">About Us </a></li>
                    <li class="Team"><a href="#">Our team </a></li>
                    <li class="Services"><a href="#">Our Services </a></li>
                    <li class="last"><a href="#"> Contact Us </a></li>
                </ul>
            </div>
        </div>

        <div id="headings">
            <h1>
                Local <span style="color: eb332c; font-weight: bold">Billingham</span>
                Solicitors Firm
            </h1>
            <img src="images/family.jpg" class="family"> <img
                src="images/home.jpg" class="home"> <img src="images/care.jpg"
                class="care">

            <h2>Family Law</h2>
            <h3>Buying & Selling Property</h3>
            <h4>Wills, Trusts & Probate</h4>


        </div>

        <div id="content">
            <div id="bottomleft">
                <h5>Welcome to Cochranes Law Firm</h5>
                <p class="para">We are a family High Street Practice, in
                    Billingham Town Centre, providing an important service to the local
                    community. we are wills and probate. buying and Selling, as well as
                    Family law Solicitors in the Billingham and Stockton-on-tees area.
                    If you would like any further information please feel free to
                    contact us by phone, email or our contact form.</p>
                <p class="lorem">Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Sed accumsan, urna sit amet euismod gravida, elit
                    ante placerat orci, et porttitor nunc velit malesuada tortor. Nam
                    ac nisl non nunc commodo vestibulum a eu velit. Sed vitae arcu sit
                    amet nulla ornare fringilla sodales vel justo. Cras hendrerit
                    libero a mauris gravida lobortis. Donec iaculis tincidunt est, non
                    rutrum lorem dictum vitae. Curabitur non justo sed est accumsan
                    posuere id eget justo. Nunc in justo congue, laoreet sem sed,
                    scelerisque nulla. Fusce in urna suscipit, imperdiet purus et,
                    ornare nunc. Ut vestibulum consectetur metus, vitae ultrices lacus
                    placerat aliquet.</p>


            </div>
            <div id="bottomright">
                <h6 class="address">Contact Address</h6>
                <p class="pclass">
                    Cochranes Law Firm <br> 67 Queensway<br> Billingham<br>TS23
                    2KH
                </p>
                <h6 class="commonnum">Contact Numbers</h6>
                <p class="nums">
                    Telephone: 01642 266800<br>Fax:01642 366809<br> DX 63160
                    BILLINGHAM
                </p>
                <p class="Email">info@cochraneslawfirm.co.uk</p>
                <h6 class="contactmail">Contact E-Mail Address</h6>


            </div>


        </div>
    </div>

    <div id="footer">
        <div id="footer_content">

            <p class="foot">
                &copy;2014 Cochranes Law Firm | Privacy Policy | Terms and
                Conditions<br> Web Design by IT Solutions.
            </p>
            <img src="images/ware.png"> <img
                src="images/accreditations.png" class="accreditations"> <small><br>
            <br>Cochranes Law Firm is a Limited Liability registered in
                England and Wales number OC343046 and our VAT number is 508 983002.
                The registered office is at 67 Queensway, Billingham. TS23 2LU.
                Authorised and regulated by the Solicitors Regulation authority
                number 547210 under rule 7.07(1) of the Solicitors Code Of Conduct.
                We have worldwide professional indemnity insurance through amtrust
                Europe Limited, No2 Minster Court, Minicing Lane, LONDON, EC3R 7BB.
                Our policy number is P13A298125P and P13B295219P. </small>
        </div>
    </div>



</body>
</html>

This is my CSS

<style>
* {
        font: 12px arial;
        padding: 0px;
        margin: 0px;
    }

    #wrapper {
        margin: 0 auto;
        width: 1130px;
    }

    #header {
        position: relative;
        height: 100px;
        width: 1130px;
    }

    #header img {
        position: absolute;
        top: 10px;
    }

    #nav {
        position: absolute;
        right: 0px;
    }

    #nav ul {
        padding: 5px;
        border-left: 1px;
        text-align: center;
        width: 600px;
    }

    #nav li {
        float: left;
        display: block;
        padding: 8px 15px;
        border-right: 2px solid #eb332c;
        position: relative;
        top: 30px;
    }

    #nav li a:hover {
        color: #c00;
        background-color: #fff;
    }

    #nav li.last {
        border-right: none;
    }

    #nav li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        color: 000000;
    }

    #headings {
        position: relative;
        height: 400px;
        width: 835px;
        margin: 0px auto;
    }

    #headings img {
        display: inline;
        background-color: #ebebeb;
        padding: 150px 0px 50px 0px;
    }

    #content {
        width: 750px;
        margin: 0px auto;
    }

    #bottomleft {
        float: left;
        width: 400px;
    }

    #bottomright {
        float: right;
        width: 300px;
        position: relative;
        left: 18px;
    }

    #footer {
        background-color: #eb322c;
        width: 100%;
        height: 140px;
        clear: both;
    }

    #footer_content {
        width: 1130px;
        background-color: eb332c;
        margin: 0px auto;
        height: 140px;
        position: relative;
        color: white;
    }

    h1 {
        background-color: #FFFFFF;
        text-align: left;
        font-size: 30px;
        position: absolute;
        top: 60px;
        left: 0px;
        z-index: 100;
        width: 340px;
    }

    h2 {
        font-size: 20px;
        position: absolute;
        bottom: 20px;
    }

    h3 {
        font-size: 20px;
        position: absolute;
        bottom: 22px;
        position: absolute;
        right: 343px;
    }

    h4 {
        font-size: 20px;
        position: absolute;
        bottom: 20px;
        position: absolute;
        right: 90px;
    }

    h5 {
        font-size: 18px;
        border-bottom: 1px solid #eb332c;
        position: relative;
        right: 45px;
    }

    p.para {
        font-family: arial;
        font-size: 12px;
        position: relative;
        right: 45px;
    }

    #bottomleft {
        position: relative;
    }

    #bottomright {
        position: relative;
        background-color: ebebeb;
        width: 268px;
        height: 220px;
    }

    h6.address {
        border-bottom: 1px solid #eb332c;
        width: 230px;
        font-size: 16px;
    }

    h6.contactmail {
        border-bottom: 1px solid #eb332c;
        width: 230px;
        font-size: 16px;
    }

    h6.commonnum {
        border-bottom: 1px solid #eb332c;
        width: 230px;
        font-size: 16px;
    }

    p.email {
        position: relative;
        top: 34px;
    }

    #search {
        position: absolute;
        left: 340px;
        top: 12px;
        width: 320px;
    }

    #search img {
        margin-top: -9px;
        margin-left: 5px;
    }

    img.accreditations {
        float: right;
    }

    small {
        font-size: x-small;
    }

    p.lorem {
        position: relative;
        right: 45px;
    }

    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--
    Displays between 768px and 1024px-->
    @media only screen and (min-device-width : 768px) and (max-device-width
        :1024px) {
        #header,#footer_content,#text {
            padding: 0px 5px;
            width: 50%;
            box-sizing: border-box;
        }
    }

</style>

To be noted that i have used my meta tag inside my style , any help would be appreciated .... Thanks ....

¿Fue útil?

Solución

1.) You are using min-device-width and max-device-width which are targeting devices (phones, tablets).

Instead, use min-width and max-width.

This, in conjunction with 

<meta name="viewport" content="width=device-width,initial-scale=1"/>

should be sufficient.

2.) You have the <meta> tag inside the <style> tags - it needs to be outside. Try it above the opening <style> tag.

3.) CSS comments are /* comment */ not <!--comment-->.

Change these three things and your code should work.

See this fiddle

Otros consejos

your css should be like this

@media only screen and (min-device-width: 400px) and (max-device-width: 1280px) {




               /* css for this resolution */


}

@media only screen and (min-device-width: 1281px) and (max-device-width: 1440px) {




               /* css for this resolution */


}

You should move the meta-tag outside of your style-tags.

This line:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Update

Make sure your media query is on a single line:

@media only screen and (min-width : 768px) and (max-width : 1024px) {

}

Demo

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top