CODEWITHSUNDEEP
htmlcssresponsive-design
Svish
Svish

Reputation: 158061

Element misplaced in Chrome after responsive adjustment

I have tried to add some simple responsiveness on a website and there's something strange going on in Chrome which I'm unable to figure out how to fix.

The problem is with the search bar in the upper right corner which should be placed in the middle of the bar like in the left image.

If I decrease the width of the browser until the search bar jumps below the menu (which works great btw), and then resize it back out, the search bar ends up like on the right.

Good Bad

If I refresh the page it jumps back to where it should be. In FireFox and IE it works as I expected. What am I missing here?

LESS source

Upvotes: 0

Views: 223

Answers (1)

Black Sheep
Black Sheep

Reputation: 6694

I change this line with display: inline-block; to display: inline-table;: 

#header h1, #header nav, #header form, #header img, #header ul, #header li, #header input {
    margin: 0px;
    padding: 0px;
    display: inline-table; /* This */ 
    vertical-align: middle;
}

and it works in FF and Chrome

UPDATE

For a better solution or "not so ugly":

I wrapped the <form> into a <div> tag, see here: LIVE DEMO

Here a part of the CSS:

/* REMOVE HERE THE FLOAT RIGHT */
#header #search { margin-top:-3px; }    

#header #search input{width:200px;padding:3px 7px;font-size:90%;border-radius:3px;}

/* SET HERE THE FLOAT RIGHT AND DISPLAY INLINE */
#searchForm { float: right; display: inline;}

h1:first-child,article:first-child{margin-top:0;}

@media only screen and (max-width: 850px){

  #header nav ul{margin-top:.5em;display:block;}
  #header h1,#header ul li{margin-right:0;}      
}

@media only screen and (max-width: 550px){

  #header{text-align:center;}
  #header #search{margin-top:.5em;display:block;float:none;}
  #header #search input{width:95%;}

  /* SET HERE THE FLOAT NONE */
  #searchForm{float: none;}
}

HTML:

<!-- WRAP THE FORM INTO A DIV-->

    <div id="searchForm">
        <form id="search" role="search" action="search" method="get">
            <input type="search" name="term" placeholder="Song title or number..." tabindex="1">
        </form>
    </div>

Tested in FF and Chrome, I hope this is help you more.

Upvotes: 1

Related Questions