Plantilla de diseño receptivo

I am new to responsive design, I want to make responsive menus, images, blocks and every thing in the website templates.

I ready that all width should be in percentage, I make this example

How can I make the form with it's input respond to different screen size without going below the ul??

preguntado el 09 de marzo de 12 a las 13:03

2 Respuestas

Problem is, that you are mixing margin set in PX and widths set in %. When screen is resized below certain dimensions, there isn't enough space left for elements with margin that big and input falls below.

You should set your margins in % - if you are working on repsonsive design.

Here is how I modified your code to make it work:

    border:1px solid black;
    display: inline-block;
    margin-left:5%; /* changed to percentage */
    margin-top:36px; /* should be percentage as well*/
ul#menu li{
    display: inline-block;
    margin-right:36px;   /* should be percentage as well*/
    width: auto;

#header form {
    display: inline-block;
    margin-right:1%; /* changed to percentage */

#header form input{
    background-color: #e0e0e0;
    height: 26px;

note: I played only with left/right margins and real dimensions are up to you.

Espero que esto ayude

respondido 09 mar '12, 15:03

For your quick start please go through below link you will find nice examples to start responsive design.

Respondido el 19 de junio de 12 a las 11:06

This is way too broad. Doesn't provide a specific answer to the question. - nombre_usuario_aleatorio

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.