¿Cómo hacer que el relleno responda en la vista móvil?

2 minutos de lectura

avatar de usuario
usuario124889

Estoy usando wordpress y usé CSS para hacer que el ancho de mi página ‘Acerca de’ y ‘Contacto’ esté más centrado y sea más pequeño agregando relleno. Sin embargo, cuando hago esto, especialmente en la vista móvil (creo que la tableta está bien), hay un espacio en blanco en ambos lados debido a eso.

Creo que el tema que estoy usando está construido de esa manera y realmente no pude encontrar algo en ese tema que haga que los elementos parezcan de menor ancho y centrados en la página, así que usé el relleno para que se vea de la manera que quiero.

Página ‘Contacto’ de mi sitio en vista móvil

Página ‘Portafolio’ de mi sitio en vista móvil

Aquí hay un enlace a mi sitio web: http://www.lisaweng.com/contacto/

¿Existe un CSS que haga que esas páginas aparezcan normales o de ancho completo cuando se ven en la vista móvil, incluso si agrego relleno, como la forma en que la página del portafolio se ve de ancho completo en el móvil, aunque tiene espacios en blanco en ambos lados de la pantalla cuando se ve en el ¿version de escritorio?

PS para el CSS para el relleno de los elementos de la página ‘Acerca de’ y ‘Contacto’, usé porcentajes en lugar de píxeles. No estoy seguro de por qué no responde completamente cuando se ve en la vista móvil.

Así es como se ve mi CSS para la página ‘Acerca de’ y ‘Contacto’:

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

y

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

¿Hay un código para arreglar esto? ¿O alguna idea de por qué es así? Si hay un código para corregir la vista móvil, ¿será el mismo para la tableta o la tableta también tiene un CSS para corregir la capacidad de respuesta como debería ser?

avatar de usuario
WPZA

Uso de consultas @media para agregar puntos de interrupción en CSS.

Debe utilizar consultas de medios dentro de su código CSS para agregar puntos de interrupción específicos.

Agregar esto a su hoja de estilo puede ayudar:

@media only screen and (max-width: 950px) {
   .cf7_custom_style_1 {
      padding-left: 10%;
      padding-right: 10%;
   }
}

@media only screen and (max-width: 600px) {
   .cf7_custom_style_1 {
      padding-left: 0;
      padding-right: 0;
   }
}

El uso del código anterior agrega puntos de ruptura a 950 px y 600 px. Significa que si el tamaño de la ventana = 950px, cambie esta clase CSS a estas propiedades.

  • Hola muchas gracias por ayudar!! ¡Realmente aprecio tu código y señalas las consultas de los medios

    – usuario124889

    1 de julio de 2018 a las 6:01

  • Disculpas por perder los dos puntos. He actualizado el código, ¡buen lugar! En cuanto al logo prueba .logo_wrapper {top: 25px;} utilizando una consulta de medios.

    – WPZA

    1 de julio de 2018 a las 10:07

  • Gracias por responder =)!! Y vaya, me refería al espacio en blanco entre el menú de navegación y donde comienza el formulario de contacto en lugar del logotipo y el formulario de contacto. ¿Conoces el nombre de la clase para apuntar a esa área si usas una consulta de medios? Probé el código que escribiste y lo probé con: @media only screen and (max-width: 1200px) { .logo_wrapper {top: 25px;}} para probar y el logo está en el mismo lugar. PS es 950px y 600px el tamaño estándar para tabletas y dimensiones móviles? preguntarse..

    – usuario124889

    1 de julio de 2018 a las 20:48

  • Probar .container_inner.default_template_holder {padding-top: 0;}. En cuanto a los tamaños estándar, debe probar cada píxel.

    – WPZA

    1 de julio de 2018 a las 21:06


  • Editar: Probé el código que escribiste y lo probé con: @media only screen and (max-width: 950px) { .logo_wrapper {top: 25px;}} ¡y funcionó! ¡¡¡GRACIAS!!! =))!!! ¡Hizo un espacio antes del logotipo en la vista de tableta/móvil, que es algo que también estaba buscando! Muchas gracias por su ayuda y amable corazón

    – usuario124889

    1 de julio de 2018 a las 21:08

¿Ha sido útil esta solución?