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

rikrdomat · 13 Nov 2020

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 · 13 Nov 2020

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

noticiasvs · 13 Nov 2020

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 · 13 Nov 2020

Lo de arriba crack

LuisPariona · 13 Nov 2020

CSS:

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

elenademarcos · 13 Nov 2020

noticiasvs dijo:
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 · 13 Nov 2020

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 · 13 Nov 2020

LuisPariona dijo:

CSS:

@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 · 13 Nov 2020

rikrdomat dijo:
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)

Insertar CODE, HTML o PHP:

@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 · 13 Nov 2020

Me etiquetaron, soy famoso

rikrdomat · 16 Nov 2020

elenademarcos dijo:
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)

Insertar CODE, HTML o PHP:

@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.

elenademarcos dijo:
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)

Insertar CODE, HTML o PHP:

@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 · 17 Nov 2020

Alguien que me ayude con mi última pregunta? 😕

LuisPariona · 18 Nov 2020

Dentro de:

CSS:

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

Agregar esto:

CSS:

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

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

rikrdomat

joenco

noticiasvs

Hadrien Rivere

LuisPariona

elenademarcos

kanikase

rikrdomat

elenademarcos

Media

rikrdomat

rikrdomat

LuisPariona

Temas similares

Privacidad y transparencia

Privacidad y transparencia