Como puedo hacer si tengo 10 iconos en una ventana, que aparezcan los 10, pero adaptandose al tamaño de la ventana?

Me alegra que la gente que se queja de lo que cuesta la hora de trabajo/proyecto de un desarrollador es justamente la que termina con cosas así.

Jajaja de pana

Buenas shurts! a ver si alguien me puede echar una mano…
Llevo unos dias con un tema de CSS que me trae loco!!

Tengo una app de escritorio, y al modificar el tamaño de la pestaña, los iconos hacen lo que quieren…

Cuando haces la ventana mas pequeña, los iconos se hacen ligeramente mas pequeños hasta un punto, que ya no se hacen mas pequeños y te da opcion para scrollear y ver los iconos que se han quedado ocultos….

En ningún momento le digo que quiero que me haga scroll, y no juego con pixeles, sino con vh y vw!

Como puedo hacer si tengo 10 iconos en una ventana, que aparezcan los 10, pero adaptandose al tamaño de la ventana?

No tienes nada de min-width/height ni nada, no?

si, en los iconos

Mmm. Prueba sin ellos para ver cómo se comportan (?)

tengo esto

.item-avatar2 {

height: 6vh !important;
width: 6vh !important;
max-width: 4vw !important;
max-height: 4vw !important;
border-radius: 50%;
display: inline-block;
margin-left: auto;
margin-right: auto;
cursor: pointer !important;
}

vh y vw son medio tricky, en cuestión de redimensión de pestañas

mmm yo creia que esos parametros te escalan en base a la ventana

Por amor a todo lo santo y bueno en el mundo ¿por qué tienes tantos !important?

Yeah, that too

lo considero importante 🤦‍♂️

Solo le pones !important cuando tienes un class u otro css modificando esa propiedad y quieres que te lea esa instead

De resto es innecesario.

Y no está recomendado hacerlo tanto, de paso

Solo le pones !important; cuando quieres torturarte en el mantenimiento del proyecto a futuro, o cuando odias al developer que viene

Es broma, solo se usa cuando es estrictamente necesario, no por deporte/diversión

Quizás esté aprendiendo en este exacto momento, so…

Y contestando a la duda inicial, estás seguro de que el elemento/icono no tiene ningún otro class?

no soy ningun experto la verdad, creia que eso se utiliza para darle prioridad sobre otros estilos 😅

Eh, sí. Hace exactamente eso, cuando otros estilos están modificando esa propiedad.

por ejemplo, al darle estilo a un icono, si no le ponia important al cursor, habia partes que le daba click y no hacia nada

!important da prioridad a la regla sobre cualquier otra regla, ya sea en el CSS o inline. Pero su uso trae como trae como consecuencia problemas de mantenimiento, porque sólo puedes sobreescribir un !important con otro !important, lo que lo hace impredecible, and that’s a no no

Como dicen por ahí, haz que funcione y después trata de mejorar/optimizar ese código. Se me hace que te estás repitiendo bastante.

And that’s fine, así es que se aprende.

Also, usa normalize.css para que todo sea consistente entre navegadores por si las moscas

puede que venga de ahi el problema de que no se adapte al tamaño de la pantalla? por los important? no deberia

Maybe, es difícil saber sin ver el código. Especialmente si tienes más !important regados por ahí.

si tienes un width con !important, es muy probable…. el height tambien podría influenciar…. responsive es mucho de flexibilidad, adaptación, y un tamaño con !important es (casi) una ley escrita en piedra

También, el height debería ir en auto. Si no, se verá funky cuando cambie de tamaño

Hablando del icono (o alguna imagen)

mmmm eso parece ser una solucion!