Menú principal descentrado en tablet

[ArtesAna]

Hola! Tenía el menú principal de la web en 2 líneas en ordenador y en 3 en tablet.

Para ajustarlo al ancho de la home he añadido a custom.css lo siguiente:
#header .menu, #header .menu > ul > li {
    display: table-cell;
}

En ordenador se ve perfecto, centrado con el carrusel y el resto de la home:

Pero en tablet tengo 3 categorías que no se ven en el ancho de la pantalla:

Imagino que porque no estoy usando bien la propiedad table-cell porque lo cierto es que no tengo ni idea…

A ver si alguien me puede ayudar a apañar esto.

Muchas gracias!

[Pixefora D]

Ummm da la impresión  que se sale de la pantalla?  Es difícil sin verlo, pero prueba a meter mediaquerys en tu css:

@media (min-width: 768px) and (max-width: 1024px) {

#header .menu, #header .menu > ul > li {
    display: block;
}

}

[ArtesAna]

Hola! Gracias por contestar. Sí, se salía de la pantalla. Los mediaquerys estaban metidos pero finalmente, el display table-cell no estaba bien usado aquí. Pude solucionarlo ajustando el margen del header-top, estaba a width 83,3333% y por eso no se me adaptaba al tamaño del resto de la home.

En tablet lo sigo viendo en dos líneas pero al menos está centrado con el resto de la web.

Si alguien sabe cómo hacer que los menús se ajusten al ancho de la home en una sola línea, tanto en ordenador como en tablet, quedaría mucho mejor.

Gracias Pixefora

[Pixefora D]

Si sale en dos lineas es porque directamente no cabe dentro del contenedor principal. Para hacer eso lo unico que puedes hacer eso:

- Ocultar algún elemento cuando el width sea menor de X.

- Bajar el font size de los items del menú.

 

 

[ArtesAna]

Y no hay una forma de que se ajuste el tamaño de los ítems del menú al tamaño de la pantalla?

[Pixefora D]

Con mediasquerys, metele varios rangos y ahí le pones los tamaños de padding, fuente etc que vayas necesitando.

https://developer.mozilla.org/es/docs/CSS/Media_queries

[antonio]

On 26/11/2020 at 1:32 PM, ArtesAna dice:

Ciao! Aveva il menu principale del web in 2 righe nel computer e in 3 nel tablet.

Per adattarlo alla larghezza della home page, ho aggiunto quanto segue a custom.css:
#header .menu, #header .menu & gt; ul & gt; li {
    display: tabella-cella;
}

Sul computer sembra perfetto, centrato con la giostra e il resto della casa:

Ma nei tablet ho 3 categorie che non si vedono nella larghezza dello schermo:

Lo immagino perché non sto usando bene la proprietà table-cell perché la verità è che non ne ho idea ...

Vedi se qualcuno può aiutarmi a risolvere questo problema.

Molte grazie!

lo siento, soy un neófito, ¿a qué altura del archivo .css inserta la cadena? y donde cambia el ancho a 83,333%
Gracias

[ArtesAna]

Gracias Pixefora, a ver si encuentro un hueco y compruebo si soy capaz de hacer lo que me dices.

 

Antonio, ¿qué tal? no toco el archivo theme.css, lo hago desde custom.css , añadiéndole este código. Trabajo en la versión 1.7.6.8.

#header .header-top .position-static {
    width: 100% !important;

}

[antonio]

1 minuto fa, ArtesAna dice:

Grazie Pixefora, vediamo se trovo un buco e controlliamo se sono in grado di fare quello che mi dici.

 

Antonio, come stai? Non tocco il file theme.css, lo faccio da custom.css, aggiungendovi questo codice. Lavoro sulla versione 1.7.6.8.

#header .header-top .position-static {
    larghezza: 100%! important;

}

estoy probando la versión 1.7.7
pero con la naturaleza del diseño y no puedo encontrar el archivo custom.css, ¿en qué directory está?

[ArtesAna]

Está en el mismo directorio que el theme y depende de tu plantilla, themes/TU_TEMA/assets/css/custom.css

[antonio]

11 minuti fa, ArtesAna dice:

Se trovi la stessa directory del tema e dipende dal tuo modello, temi / TU_TEMA / assets / css / custom.css

Ti assicuro che non c'è ma ho salvato una copia del file del tema prima di apportare le modifiche, per ogni evenienza

 

sin embargo noté que en la carpeta clásica hay y está vacío; ¿Puedo ponerlo en el directorio de plantillas que utilizo para realizar los cambios necesarios?

Edited December 9, 2020 by antonio (see edit history)

[ArtesAna]

Qué raro... pues genéralo, porque tus cambios deberías realizarlos en custom y no en el theme.

Si no, también sé que existe un modulo de custom, puedes buscarlo. Se instala en el backoffice y solo le vas metiendo los códigos que quieras, como el que yo te he puesto pues ahi, directamente lo escribes.

[antonio]

1 minuto fa, ArtesAna dice:

Che strano ... poi generalo, perché le tue modifiche dovrebbero essere fatte in custom e non nel tema.

In caso contrario, so anche che esiste un modulo personalizzato, puoi cercarlo. È installato nel backoffice e inserisci solo i codici che desideri, come quello che ho messo per te, quindi lo scrivi direttamente.

sin embargo noté que en la carpeta clásica hay y está vacío; ¿Puedo ponerlo en el directorio de plantillas que utilizo para realizar los cambios necesarios?

[Pixefora D]

No todos los themes tienen un custom.css. Añadaleo a tu global.css dentro de la carpeta assets/css, recuerda posteriormente borrar la caché de tu prestashop y la de tu navegador.

[antonio]

No entiendo por qué, ingresé el código, ahora mi CSS personalizado es así:

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
#header .header-top .position-static {long
    : 100%!important;
}

#header .menu, #header .menu & gt; ul & gt; li {
    display: table-cell;
}

pero sigo viendo esto:

 

[Pixefora D]

No puedes poner el css de otra página tal cual en la tuya,  a no ser que useis el mismo theme lo cual es poco probable.

Además no existe long en css, supongo que querrás poner width 

Ese código te puede dar una idea de cómo hacer lo que buscas, pero debes adaptarlo a las clases, ids y etiquetas de tu plantilla.

Edited December 10, 2020 by Pixefora D (see edit history)