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

media css

12,383

Solution 1

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 :)

Solution 2

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
}

12,383

Author by

Rohit Rao

Updated on August 23, 2022

Comments

Rohit Rao over 1 year

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;
        }
}

Rohit Rao almost 11 years

Well, i have 3 queries, 320, 600 and 960, so you mean to say that i use 960 first then 600 then the 320 and it'll work? Please correct me if i am wrong.
Abdul Malik almost 11 years

Exactly. Always use this order to write media quires
Rohit Rao almost 11 years

I'll try this. Thank you Abdul. :)
Abdul Malik almost 11 years

what you want to do with this form, can u explain i can assist you to get desired result
Rohit Rao almost 11 years

It's actually very simple, the output you see now is for 960px and 320px, and when it comes to 600px, i just need the button to fall beside the text field. It's for people to subscribe for a newsletter from all the screens.
Rohit Rao almost 11 years

Wow, now as i'm just starting, what's my mission! How do i solve it.
Abdul Malik almost 11 years

use max-width instead of min-width
Rohit Rao almost 11 years

I did that, trying few things from then on.
cimmanon almost 11 years

It depends on your coding preference, really. I've added a media query showing how to specify both min-width and max-width, but I prefer to rely on cascade using a mobile first style of writing media queries.
Rohit Rao almost 11 years

Hey you know what, i think i just found the right code match (the solution), but i cant see it on production now. Will let you know tomorrow. What out for this space. Thank you Abdul, appreciate your help! :)
Rohit Rao almost 11 years

Ok, i guess i just did find a sort of solution. let me see. :) thank you!