Tamaño de fondo para pantallas pequeñas

Here on this WordPress site http://www.grappler.tk/dyebeta/ when I resize the browser to less then about 500px then a scroll bar appears at the bottom and I get empty space on the right hand size.

preguntado el 10 de marzo de 12 a las 11:03

2 Respuestas

header-logo is 600px wide. This causes the scrollbar, even though the children inside #header-logo have % widths or no set width so they don't seem to overflow, but they do.

You can either have #header-logo have no width and use an @media query to add min-width:600px on larger screens (if you need a width because it's a float or something), OR you can keep the width: 600px on that and set everyone else to a min-width of 600px as well (that would ruin your responsiveness though).

When you resize your browser to smaller than 500px or so, the main box is keeping to the width: 90% you've set... 90% of the body. Strangely enough, your body element is doing as I expect (it's only a bit wider than your wrap) but the background colour is continuing on (usually that also gets cut off). Maybe it's being painted onto the html element, who always fills the viewport no matter what.

I love the body:after content, that's a neat debugging tool

Respondido el 20 de junio de 20 a las 10:06

Remove the width 600px from style.css line 68 (#header-logo)

width 600px is removed from below css.

#header-logo {
    float: left;
    text-align: left;
    vertical-align: middle !important;
}

respondido 10 mar '12, 12:03

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