Media Query has no effect on html forms

Question

I'm trying to increase the size of the text input when the screen is on mobile but the media query doesn't seem to change the text input although it does change everything else.

HTML:

<!DOCTYPE html>
<html>


    <head>
        <title>findFriends</title>
        <link rel='stylesheet' type='text/css' href='./css/style.css'/>
        
    </head>


    <body>

        <header>
            <form action='' id='search_bar'>
                <input type='text' name='search' id='ggg'/>
                <input type='submit' name='submit_button'/>
            </form>
            <div id='logo'>
                <img src='./img/flamingo.svg'/>
                <a href='#'>Chirpify</a>
            </div>
            <div id='navigation'>
                <a href='#' class='profile'></a>
                <a href='#' class='msg'></a>
                <a href='#' class='noti'></a>
            </div>
        </header>
    </body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', sans-serif;
    font-size: 12px;
}

header {
    position: fixed;
    top: 0;
    left: 0;

    display: grid;
    grid-template-columns: 40% 20% 40%;

    color: white;
    background-color: var(--dark-blue);

    height: 70px;
    width: 100%;
}

#search_bar{
    display: flex;

    align-self: center;
    justify-self: start;

    padding-left: 30px;
}

#search_bar input[type='text']{
    font-size: 0;
    
    border: none;
    background: url(../img/search.svg) no-repeat;
    border-radius: 0;

    color: white;

    height: 20px;
    width: 25px;
}




@media only screen 
    and (max-device-width: 414px) 
    and (max-device-height: 896px) {

        header{
            height: 180px;
        }

        #search-bar input[type='text']{
            height: 70px;
            width: 70px;
        }

        #search-bar input[type='text']:focus{
            width: 300px;
        }
}

You can see in the picture above that the magnifying glass is super tiny. It's supposed to look bigger.

Can anyone help me figure out how can I fix this?

You have two different ID's in the HTML/CSS: `search-bar` vs `search_bar` — DBS, Dec 15 '20 at 11:28
Does this answer your question? [Why are my CSS3 media queries not working?](https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working) — Mr T, Dec 15 '20 at 11:30

Ahmad Habib · Accepted Answer · 2020-12-15T11:45:56.030

Try this.

In media query you wrote #search-bar which should be #search_bar

Working code:

* {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', sans-serif;
    font-size: 12px;
}

header {
    position: fixed;
    top: 0;
    left: 0;

    display: grid;
    grid-template-columns: 40% 20% 40%;

    color: white;
    background-color: var(--dark-blue);

    height: 70px;
    width: 100%;
}

#search_bar{
    display: flex;

    align-self: center;
    justify-self: start;

    padding-left: 30px;
}

#search_bar input[type='text']{
    font-size: 0;
    
    border: none;
    background: url(../img/search.svg) no-repeat;
    border-radius: 0;

    color: white;

    height: 20px;
    width: 25px;
}




@media only screen and (max-device-width: 414px) and (max-device-height: 896px) {

        header{
            height: 180px;
        }

        #search_bar input[type='text']{
            height: 70px;
            width: 70px;
        }

        #search_bar input[type='text']:focus{
            width: 300px;
        }
}

<header>
  <form action='' id='search_bar'>
    <input type='text' name='search' id='ggg' />
    <input type='submit' name='submit_button' />
  </form>
  <div id='logo'>
    <img src='./img/flamingo.svg' />
    <a href='#'>Chirpify</a>
  </div>
  <div id='navigation'>
    <a href='#' class='profile'></a>
    <a href='#' class='msg'></a>
    <a href='#' class='noti'></a>
  </div>
</header>

See Fiddle for reference

`max-device-width` is valid media, so please explain why are you suggesting to change to `max-width` instead — Mr T, Dec 15 '20 at 11:36
Because `@media only screen and (max-device-width: 414px) and (max-device-height: 896px)` does not affect CSS in any way — Ahmad Habib, Dec 15 '20 at 11:38
only if you are not using actual device -> https://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web — Mr T, Dec 15 '20 at 11:41

Media Query has no effect on html forms

1 Answers1