ejemplos - header responsive css

Bootstrap 2.3 CSS Responsive izquierda con un espacio en blanco a la derecha

Question

Estoy creando un sitio web (y soy un noob en esto). Estoy trabajando en la parte de funcionalidad del diseño y haré que alguien haga gráficos más tarde.

Actualmente, cuando entra en respuesta (vista móvil) deja un margen de 2px a la derecha que se puede mover en un navegador móvil (y desplazable). No puedo, por mi vida, deshacerme de eso.

Si enciendo overflow-x: hidden, se vuelve no desplazable pero sigue siendo móvil.

Quiero que ese espacio extra se vaya. No lo veo definido como relleno en ninguno de los css.

Utilizando Bootstrap 2.3

Answer 1

Eliminar margen izquierdo, margen derecho

Y cambio

 <div class="navbar">
<div class="navbar-inner navbar-fixed-top">

a

 <div class="navbar navbar-fixed-top">
<div class="navbar-inner">`

Answer 2

He intentado hacer esto, pero funcionó solo en emuladores móviles basados ​​en navegador. También funciona bien cuando cambio el tamaño de mi navegador.

Pero cuando lo verifico en mi teléfono: Samsung Galaxy S2 y iPhone 5, todavía me muestra el espacio en blanco.

También intenté:

@media handheld and (max-width: 481px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}
@media handheld and (max-width: 380px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}

Answer 3

Reemplace la clase .container con .container-fluid en el cuerpo y en su archivo .css haga el padding right and left : 0px; Eso es.

Answer 4

Resolví esto simplemente envolviendo el .row en otro elemento de clase .container-fluid. Esto debería hacerse cargo del margen.

Answer 5

Resuelto agregando esto a mi css personalizado:

html, body {
width: auto !important;
overflow-x: hidden !important;
}

Nota: el !important solo se usa para que tenga prioridad sobre otros CSS. La mayoría de las instancias no serán necesarias si carga su CSS personalizado después de su bootstrap CSS.

Answer 6

Sé que llego muy tarde al juego aquí, pero me di cuenta de por qué sucede esto en primer lugar. Si está utilizando una barra de navegación, hay un relleno adicional en el elemento de la derecha de la barra de navegación que no debería estar allí. Tiene un margen derecho de 15px que causa esta brecha. Sobrescribirlo y resolver el problema!