Hacer Responsive texto a 2 columnas (HTML)  

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

@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

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.