Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Scroll horizontal que no tendría que estar

Estas en el tema de Scroll horizontal que no tendría que estar en el foro de CSS en Foros del Web. Buenas, Estaba diseñando a la que me encuentro que la web tiene scroll horizontal... algo tiene que andar mal por el css para que aparezca ...
  #1 (permalink)  
Antiguo 02/06/2016, 09:54
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Scroll horizontal que no tendría que estar

Buenas, Estaba diseñando a la que me encuentro que la web tiene scroll horizontal... algo tiene que andar mal por el css para que aparezca ese scroll, pego el css de toda la página para ver si vosotros lográis localizarlo

Código CSS:
Ver original
  1. body {
  2.     font-family: 'Open Sans', sans-serif;
  3.     font-size: 16px;
  4. }
  5.  
  6. header {
  7.     background: #fff;
  8.     padding: 20px;
  9.     margin: -40px 50px -30px 50px;
  10.  
  11.     display: flex;
  12.     flex-flow: row wrap;
  13.     justify-content: space-between;
  14.     align-items: center;
  15. }
  16.  
  17. header #menu {
  18.     margin-top: 15px;
  19.     display: flex;
  20.     justify-content; center;
  21.     flex-flow: row wrap;
  22.     text-align: center;
  23.     align-items: center;
  24. }
  25.  
  26. header #menu a {
  27.     font-size: 1.3em;
  28.     text-decoration: none;
  29.     color: #666;
  30.     font-weight: bold;
  31.     padding: 10px 20px;
  32.     margin-left: 20px;
  33.     margin-bottom: 10px;
  34.     flex: 1 1;
  35. }
  36.  
  37. header #logo {
  38.     display: flex;
  39.     flex-flow: row wrap;
  40.     align-items: center;
  41.     justify-content: center;
  42. }
  43.  
  44. header #logo h1 {
  45.     font-size: 3em;
  46. }
  47.  
  48. #presentacion {
  49.     background-image: url("bgazul.jpg");
  50.     background-position: bottom;
  51.     background-size: cover;
  52.     margin: 0 -20px 0 -20px;
  53.     padding: 80px 50px;
  54.  
  55.     display: flex;
  56.     flex-flow: column wrap;
  57.     text-align: center;
  58.     justify-content: center;
  59.     align-items: center;
  60. }
  61.  
  62. #presentacion h2 {
  63.     color: #fff;
  64.     font-size: 3.5em;
  65.     margin-top: -5px;
  66.     margin-bottom: -5px;
  67.     font-weight: bold;
  68.     text-shadow: 2px 2px 3px #000000;
  69.    
  70. }
  71.  
  72. #presentacion p {
  73.     text-transform: none;
  74.     font-size: 1.5em;
  75.     font-weight: lighter;
  76.     color: #fff;
  77.     text-shadow: 1px 1px 2px #000000;
  78.     width: 60%;
  79. }
  80.  
  81. #presentacion a {
  82.     text-decoration: none;
  83.     color: #fff;
  84.     background: #E1B63D;
  85.     padding: 15px;
  86.     border: 1px solid #FFF73D;
  87.    
  88. }
  89.  
  90. #servicios {
  91.     max-width: 1024px;
  92.     margin: 0 auto;
  93.     display: flex;
  94.     flex-flow: row wrap;
  95.    
  96. }
  97.  
  98. #servicios article {
  99.     background: #F7F7F7;
  100.     padding: 10px 20px;
  101.     width: 25%;
  102.     margin: 10px;
  103.     margin-top: 30px;
  104.     display: flex;
  105.     flex-flow: row wrap;
  106.     justify-content: center;
  107. }
  108.  
  109. #servicios article h2 {
  110.     text-align: center;
  111.     font-size: 1.5em;
  112. }
  113.  
  114. #servicios article p {
  115.     text-align: center;
  116.     font-size: .9em;
  117. }
  118.  
  119. #servicios article a {
  120.     margin: 15px 0;
  121.     background: #3342F7;
  122.     border: 1px solid #fff;
  123.     padding: 10px;
  124.     text-decoration: none;
  125.     color: #fff;
  126. }
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #2 (permalink)  
Antiguo 02/06/2016, 13:59
Avatar de michellqm  
Fecha de Ingreso: septiembre-2015
Mensajes: 21
Antigüedad: 9 años, 2 meses
Puntos: 5
Respuesta: Scroll horizontal que no tendría que estar

Hola!

Tendrás alguna página abierta en la que pueda chequear? así a simple vista no puedo decirte exactamente que código te da el problema

Seguramente es un contenedor que con sus margenes se está ensanchando más de lo que debería. Mi recomendación es que uses la herramienta de desarrollador (F12). Haces scroll vertical al máximo y con el puntero de la herramienta puedes ir chequeando que elemento es el que se sale de su margen pues cuando los seleccionan se tornan Azules

Feliz día!
  #3 (permalink)  
Antiguo 03/06/2016, 08:39
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Respuesta: Scroll horizontal que no tendría que estar

La cosa es que va por % de la página no por px, si hubiera algún px más alto que el resto lo entendería
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #4 (permalink)  
Antiguo 03/06/2016, 10:48
Avatar de michellqm  
Fecha de Ingreso: septiembre-2015
Mensajes: 21
Antigüedad: 9 años, 2 meses
Puntos: 5
Respuesta: Scroll horizontal que no tendría que estar

Claro, pero la regla de margin también afectan sacando los elementos de su porcentaje y si hay cuadros dentro de cuadros que tengan margenes los va a empujar, quizás puedas analizar los elementos que tengan esta propiedad

Saludos
  #5 (permalink)  
Antiguo 03/06/2016, 11:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Scroll horizontal que no tendría que estar

Hay por ahí un margin-left. Tal vez sea eso, y la otra es que en ningún lado pusiste el border-box que ya habíamos comentado.

Recuerda que el margin va por afuera del border-box, así que se suma al 100%.
  #6 (permalink)  
Antiguo 03/06/2016, 12:50
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Respuesta: Scroll horizontal que no tendría que estar

tengo puesto
Código CSS:
Ver original
  1. * {
  2.     box-sizing: border-box
  3. }

tal vez lo pondría después de poner aquí el código, pero no lo soluciona, veré los margin left..

EDITO

Solucionado, tenía varios márgenes que se hacían mas grande el documento horizontalmente

en #presentacion y en #precio. las he quitado y perfecto !!
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #7 (permalink)  
Antiguo 03/06/2016, 14:56
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Scroll horizontal que no tendría que estar

Yo casi no uso para nada el margin, uso puro padding. De vez en cuando para compensar con un padding, pero casi no. Ya me acostumbré.

De hecho ya hasta en el diseño impreso no veo ya márgenes, sino márgenes interiores. Uno comienza con una hoja de papel y le empieza a quitar márgenes hacia adentro... padding.

Etiquetas: background, color, horizontal, logo, scroll, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:31.