Ajustar tamaño de elemento en móviles con CSS

[rikrdomat]

Tengo un plugin instalado en mi sitio que hace salga un popup, en lc pc se ve bien, pero en móviles la foto de perfil de la persona o avatar se ve ovalada, cambia el tamaño.

Me podrían dar una opinión sobre como cambiar el tamaño solo en dispositivos móviles?

Mi sitio web: https://socialmonkeyagencia.com/

Adjunto capturas de referencia. Gracias

 

[joenco]

Inspecciona el elemento y mira que clase contiene, luego con esa clase le colocas los CSS que necesitas.

 

[noticiasvs]

Tendrías que utilizar media queries, ejemplo:

@Media (max-width: 600px) {
// clases / id
}

Por ejemplo con este código, cuando la resolución sea menor a 600px se aplicará el css que pongas dentro.

Igual te pasa que le en la versión desktop tienes width: 300px y cuando le pones ahí width:100% no te hace caso, en ese caso añádele !important:

.clase {
width:100%!important
}

un saludo

 

[Hadrien Rivere]

Lo de arriba crack

 

[LuisPariona]

@media screen and (max-width: 786px) {
.nx-notification.nx-custom .nx-notification-theme-four .notificationx-image {
width: 60px!important;flex-basis: 60px;}
}

 

[elenademarcos]

Tendrías que utilizar media queries, ejemplo:

@Media (max-width: 600px) {
// clases / id
}

Por ejemplo con este código, cuando la resolución sea menor a 600px se aplicará el css que pongas dentro.

Igual te pasa que le en la versión desktop tienes width: 300px y cuando le pones ahí width:100% no te hace caso, en ese caso añádele !important:

.clase {
width:100%!important
}

un saludo

Exacto. Si buscas algo sobre "media queries" te explica todo

 

[kanikase]

La opción de media queries es correcta y la mejor, pero también puedes utilizar la función wp_is_mobile de wordpress.

 

[rikrdomat]

@media screen and (max-width: 786px) {
.nx-notification.nx-custom .nx-notification-theme-four .notificationx-image {
width: 60px!important;flex-basis: 60px;}
}

Bro! Gracias por responder, este código me funcionó pero la equis para cerrar la notificación sigue quedando afuera, qué debo modificar para que quede adentro? Gracias!

 

[elenademarcos]

Bro! Gracias por responder, este código me funcionó pero la equis para cerrar la notificación sigue quedando afuera, qué debo modificar para que quede adentro? Gracias!

No es lo más limpio, pero igual te vale sustituir el código añadiento esto (puedes cambiar el 100px por el valor que te lo arregle)

@media screen and (max-width: 786px) {
.nx-notification.nx-custom .nx-notification-theme-four .notificationx-image {
width: 60px!important;flex-basis: 60px;}
span.notificationx-close {
    right: 100px!important;
}
}

 

[Media]

Me etiquetaron, soy famoso

 

[rikrdomat]

No es lo más limpio, pero igual te vale sustituir el código añadiento esto (puedes cambiar el 100px por el valor que te lo arregle)

@media screen and (max-width: 786px) {
.nx-notification.nx-custom .nx-notification-theme-four .notificationx-image {
width: 60px!important;flex-basis: 60px;}
span.notificationx-close {
    right: 100px!important;
}
}

Hola!
Gracias por responder, me funcionó, ahora solo me queda una duda (he tratado de solucionarlo yo solo pero no puedo) 🙁 -- La imagen de la chicha, la primera notificación no sale bien, es decir, no se le ve la cara, inspeccionando puse el Height en 100 y si se ve pero al tratar de aplicarlo con css me queda igual, adjunto referencias.

Gracias.

No es lo más limpio, pero igual te vale sustituir el código añadiento esto (puedes cambiar el 100px por el valor que te lo arregle)

@media screen and (max-width: 786px) {
.nx-notification.nx-custom .nx-notification-theme-four .notificationx-image {
width: 60px!important;flex-basis: 60px;}
span.notificationx-close {
    right: 100px!important;
}
}

Hola! Gracias por responder.
Sólo me queda una duda, la imagen de la primera mortificación donde sale una chica sale cortada, no sale la imagen bien.
Intenté solucionarlo yo solo pero ni pude 🙁 colocando el height en 100 pero igual no me funcionó, igual adjunto referencias.

 

[rikrdomat]

Alguien que me ayude con mi última pregunta? 😕

 

[LuisPariona]

Dentro de:

@media screen and (max-width: 786px) {
    
}

Agregar esto:

.nx-notification.nx-custom .nx-notification-theme-four .notificationx-image img {
height: 120px!important;}