Avisos
Vaciar todo

Hacer Responsive texto a 2 columnas (HTML)  

 
PABLO
 PABLO
Usuario activo

Tengo este código HTML para visualizar dos columnas en pantalla de 1600px de ancho, pero luego en el móvil no se muestra en una sola fila. ¿ como puedo hacer que esto sea responsive con código html ?  gracias

<div style="padding: 10px; float: left; widht: 45%; text-align: justify; font-size: 20px;"><a href="https://paginaejemplo.com/elemento1">Primer Elemento</a></div>
<div style="padding: 10px; float: right; widht: 45%; text-align: justify; font-size: 20px;"><a href="https://paginaejemplo.com/elemento2">Seundo Elemento</a></div>

Citar
Respondido : 09/05/2020 9:05 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Pablo,

Al asignar tus div con un ancho de 45% le estas indicando que se adapten a ese tamaño dentro de cualquier dispositivo que se abra, pero tienes un error en tu código ya que estas escribiendo la palabra widht de forma incorrecta, debe ser width quizás por eso no este funcionando tu código.

También puedes usar un parámetro como max-width y indicarle el ancho máximo que deben tener tus cajas.

Puedes usar algo por ejemplo

<div style="padding: 10px; float: left; max-width: 45%; text-align: justify; font-size: 20px;"><a href="https://paginaejemplo.com/elemento1">Primer Elemento</a></div>
<div style="padding: 10px; float: right; max-width: 45%; text-align: justify; font-size: 20px;"><a href="https://paginaejemplo.com/elemento2">Seundo Elemento</a></div>

Prueba si con esto te funciona

Un Saludo

 

 

ResponderCitar
Respondido : 09/05/2020 9:53 pm

Cursos Gratuitos WordPress

PABLO
 PABLO
Usuario activo

@karen

hola, gracias. He probado con lo que me dices y he corregido width, pero los dos elementos de texto (en el móvil) me aparecen en 2 filas y no en una sola.

El código que he puesto es:

<div style="padding: 10px; float: left; max-width: 45%; text-align: justify;"><a href="https://misitioweb.com/pagina1">Vehículos en Provincia1</a></div>
<div style="padding: 10px; float: right; max-width: 45%; text-align: justify;"><a href="https://misitioweb.com/pagina2">Vehículos en Provincia2</a></div>

¿puede ser porque los textos son largos y no caben los dos en una sola fila ? Pero si es responsive, no debería el sistema hacerlos con un size más pequeño ? o se lo tengo que indicar yo ? En ese caso como hago para decir que en el móvil font-size sea p.e 12px ?

Muchas gracias de antemano

 

 

 

ResponderCitar
Respondido : 10/05/2020 7:39 am
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Usar código en línea para cambiar el comportamien en móviles no será posible, o como mínimo te complicarás.

Mejor usa la siguiente estructura HTML

<div class="col-wrapper">
<div class="col"><a href="https://paginaejemplo.com/elemento1">Primer Elemento</a></div>
<div class="col"><a href="https://paginaejemplo.com/elemento2">Seundo Elemento</a></div>
</div>

La estructura superior tiene un contenedor con una clase col-wrapper, y dos elementos con la clase col

Luego que tienes esa estructura puedes usar el siguiente código CSS:


.col-wrapper{
display:flex;
}

@media(max-width:580px){
  .col-wrapper{
  display: block;
  }
}

Puedes agregar este código CSS al final de tu archivo style.css de tu child-theme o agregarlo en Apariencia > Personalizar > CSS

Saludos.

Esta publicación ha sido modificada el hace 7 meses por Jhon
ResponderCitar
Respondido : 10/05/2020 1:47 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress