Editar el diseño de mi menú de pie de página

usando los navegadores Chrome + Firefox en una computadora portátil… Veo los elementos en el menú de pie de página; no parece inusual. También se ve bien en iPhone.

Hola, en el style.css del tema cerca de la línea # 3296 dentro de la consulta de medios de min-width: 1024pxactualice una línea en la siguiente regla:

.footer-bottom .footer-bottom-right {
  /* just change the width from 30% to at least 45% */
  width: 45%; /* or higher */
}

Al 30% el .footer-bottom-right flexbox es demasiado estrecho, lo que hace que los textos se apilen uno encima del otro. ¡Buena suerte!

Gracias Lisa, ¿estás diciendo que las páginas de mi pie de página no están apiladas en tu vista?

Mejor,

Jono

Hola Gerry,

Gracias por la info. Nunca antes había actualizado el código, así que solo quiero estar seguro antes de guardar cualquier cambio en caso de que algo salga mal.

¿Dónde encuentro exactamente el ‘estilo.css del tema cerca de la línea n.º 3296? No puedo verlo por ninguna parte.

Además, con la regla a la que dijiste actualizarlo… ¿simplemente copio y pego eso?

¡Muchas gracias!

Jono

respuesta eliminada por el colaborador

• Esta respuesta fue modificada hace 18 horas y 13 minutos por lisa.

Cuando vi su sitio, los 3 elementos que se muestran en el menú de pie de página se mostraban uno al lado del otro horizontalmente. Parece que le preocupa que cada elemento se muestre en 2 líneas. Estoy de acuerdo en que aumentar el ancho del contenedor podría ayudar con ese problema. Una modificación del código CSS de tu tema podría ayudar. Parece que es posible que tengas un tema personalizado. ¿Puedes contactar al desarrollador del tema?

• Esta respuesta fue modificada hace 18 horas y 11 minutos por lisa.

• Esta respuesta fue modificada hace 18 horas y 10 minutos por lisa.

Hola Jono, intentémoslo de esta manera… en el administrador de WordPress, haz clic en Apariencia > Personalizar luego haga clic en CSS adicionalluego ingrese lo siguiente:

@media (min-width: 1024px) {
  /* Adjust footer link layout */
  .footer-bottom .footer-bottom-right {
    width: 45%;
  }
}

Haga clic en el Publicar botón después. Luego, realice una actualización completa en su navegador web para ver si el diseño del pie de página cambia. ¡Buena suerte!

¡Gracias Gerry! Eso funcionó perfectamente.

¿Algún truco para obtener el mismo resultado para la vista móvil? ¿O simplemente es demasiado pequeño allí?

No te preocupes, Jono. Para la versión móvil, es demasiado estrecho para tener los enlaces del menú y los derechos de autor en una sola línea, pero si está dispuesto a probar un diseño ligeramente diferente, lo siguiente evitaría que el texto se acumule en pantallas de 410 px y superiores… por favor reemplazar el código anterior que proporcioné con lo siguiente:

/* Adjust footer links layout on mobile */
.footer-bottom .footer-bottom-right {
  flex-wrap: wrap-reverse;
  row-gap: 1em;
}
.footer-bottom .footer-bottom-right ul li {
  margin-left: 10px;
  margin-right: 10px;
}

@media (min-width: 640px) {
  .footer-bottom .footer-bottom-right ul li {
    margin-left: 20px;
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  /* Adjust footer link layout */
  .footer-bottom .footer-bottom-right {
    flex-wrap: nowrap;
    width: 45%;
  }
  .footer-bottom .footer-bottom-right ul li {
    margin-left: 10px;
  }
}

Mismo proceso que antes. Si los resultados de lo anterior no son de su agrado, no dude en utilizar el código anterior proporcionado. ¡Buena suerte!