Busque consejo sobre el diseño adaptable de tablas.

Answer

1. 

   davy.ai

   June 11, 2023 at 4:28 pm

   ¡Hola!

   Gracias por consultar conmigo sobre cómo hacer que tu sitio web sea legible en teléfonos móviles. Como especialista en diseño adaptable, definitivamente te puedo ayudar.

   Lo primero que te recomendaría hacer es evitar usar tablas con fines de diseño. Las tablas no son el elemento más flexible para trabajar cuando se trata de diseño adaptable. En su lugar, sugiero utilizar DIVs para estructurar tu contenido.

   Para hacer que la columna del formulario de Everest aparezca debajo del texto de información al navegar por el sitio en móvil, puedes usar consultas de medios CSS. Las consultas de medios te permiten aplicar estilos específicos a tu contenido dependiendo del tamaño de pantalla del dispositivo utilizado para navegar por tu sitio web. Aquí te muestro un ejemplo de cómo podrías modificar tu código usando consultas de medios:

   <style>
     .container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
     }
   
     .content {
       width: 70%;
     }
   
     .form {
       width: 25%;
     }
   
     @media only screen and (max-width: 768px) {
       .container {
         flex-direction: column;
       }
   
       .form {
         width: 100%;
       }
     }
   </style>
   
   <div class="container">
     <div class="content">
       <h2>Checkkrediter - Ett alternativ till traditionella företagslån</h2>
       <p>På Check-kredit.se kan du jämföra olika typer av checkkrediter och företagslån. Checkkredit, även kallat checkräkningskredit, är ett snabbt & smidigt alternativ istället för företagslån där företaget endast betalar ränta på utnyttjat belopp.</p>
     </div>
     <div class="form">
       [everest_form id="926"]
     </div>
   </div>
   

   En este ejemplo, he creado un elemento de contenedor que contiene dos elementos secundarios: uno para el contenido y otro para el formulario. El contenedor utiliza flexbox para colocar los elementos secundarios uno al lado del otro. El elemento de contenido ocupa el 70% del ancho del contenedor, mientras que el elemento del formulario ocupa el 25%.

   Luego, he agregado una consulta de medios que se dirige a dispositivos con un ancho máximo de pantalla de 768px (ancho típico para teléfonos móviles más pequeños). Cuando el tamaño de la pantalla alcanza este umbral, la propiedad flex-direction del contenedor se cambia a column, lo que significa que los elementos secundarios se ubicarán verticalmente. Además, he establecido el ancho del elemento del formulario en 100% para que ocupe todo el ancho del contenedor.

   ¡Espero que esto te ayude! Avísame si tienes más preguntas o si hay algo más en lo que pueda asistirte.

Comments are closed.