CODEWITHSUNDEEP
mediacss
Rohit Rao
Rohit Rao

Reputation: 41

@media screen and (min-width: 320px) being overwritten

I am tring to work with a small from, just 3 elements. This is the i'm using, can someone please let me know where i am going wrong? I have tried working with both min-width and max-width, nothing seems to be working.

<style type="text/css">


html,body{margin:0px; padding:0px; font-family:arial;}

form.form { margin:0px;}

p span strong{ color:#505050;}

form.form span.error {clear: left;display: block;font-weight: normal;margin-top: 2px;padding-left: 166px;}

/*form.form span.error {clear: left;display: block;font-weight: normal;margin-top: 2px;padding-left: 172px;}*/

form.form p.required, form.form span.required, form.form label.required
{font-weight: normal;}

form.form p {clear: left;margin: 0px;padding: 0px;width:544px;}


.btn_subscribe {
float: left;
margin: 0 0 11px 0;
width: 174px;
height: 41px;
background: url("http://www.vuesoftware.com/assets/btn_subscribenow.png") no-repeat;
background-size:170px 40px;
border: none;
cursor: pointer;
}

form.form div.submit{padding-top:7px;}
.text{ border: none; background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left; width: 184px; height:32px; font-size:12px;
    padding-left:11px;}

form.form div.no-label{font-size:11px; margin-left:0px !important;color: rgb(226, 140, 36); }

form.form div label {display: block; float: left; margin: 0; padding: 0 13px 0 0; text-align: right; width: 160px; font-size:13px;}

.required{ padding:10px 0px 0px !important;  }
div span span {display: block; padding-left:174px; }
div span span label{ float:none !important;}

@media screen and (max-width: 320px)
{
    form.form div.no-label{
        float:none;
        width:200px;
        }
    .text{
        border:none;
        background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left;
        width:184px;
        height:32px;
        }
    .btn_subscribe{
        background:url("http://www.vuesoftware.com/assets/[email protected]") no-repeat;
        background-size:170px 40px;
        }
      p span strong{
          display:none;
        }
}

@media screen and (min-width: 320px)
{
    form.form div.no-label{
        float:left;
        width:350px;
        }
    .text{
        border:none;
        background:url("http://www.vuesoftware.com/assets/input_subscribe_big.png") no-repeat top left;
        width:300px;
        height:32px;
        font-size:12px;
        padding-left:11px;
        }
    .btn_subscribe {
        width:250px;
        height:40px;
        background: url("http://www.vuesoftware.com/assets/[email protected]") no-repeat;
        background-size:250px 40px;
        border:none;
        cursor:pointer;
        }
}

@media screen and (min-width: 960px)
{
    form.form div.no-label{
        float:none;
        width:200px;
        }
    .text{
        border:none;
        background:url("http://www.vuesoftware.com/assets/input_subscribe.jpg") no-repeat top left;
        width:184px;
        height:32px;
        }
    .btn_subscribe{
        background:url("http://www.vuesoftware.com/assets/[email protected]") no-repeat;
        background-size:170px 40px;
        }
    p span strong{
        display:block;
        }
}

Upvotes: 4

Views: 12791

Answers (2)

cimmanon
cimmanon

Reputation: 68319

Let's go through your media queries with imaginary DeviceX, which is 360px wide.

@media screen and (max-width: 320px) {
    // no match:  360px > 320px
}

@media screen and (min-width: 320px) {
    // match:  360px >= 320px
}

@media screen and (min-width: 960px) {
    // no match: 360px < 960px
}

/* media query found in your fiddle that's not listed in the OP */
@media only screen and (max-width:960px){
    // match:  360px <= 960px
}

Basically, your device is matching multiple media queries. Later media queries are overwriting properties found in earlier media queries.

It may be that what you're looking for is to have a media query with both a min-width and a max-width:

@media screen and (min-width: 600px) and (max-width: 960px) {
    // no match: 360px < 600px
}

Upvotes: 1

Abdul Malik
Abdul Malik

Reputation: 2642

you are using wrong order of media quires use @media screen and (min-width: 960px) css first then add css of @media screen and (min-width: 320px) simple :)

Upvotes: 2

Related Questions