Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Duda] Responsive no funciona para productos

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Diseño responsivo y actividad Adaptar una página para celular

por Sayury Obando López
| 32k xp | 12 posts
Technical support representative

Aún cuando por fin la home luce bien, la página responsive de productos no funciona ni en la parte del header ni en el footer, cuando se supone que al menos esa parte debería lucir igual en ambas páginas puesto que comarten el mismo CSS file, dejaré screenshots para ilustrar mejor que ocurre. El primero es cómo luce actualmente el home responsive que está bien a pesar de que tuve que modificar cosas y no quedó igual a la versión del video, el segundo screenshot muestra cómo está el responsive de productos y es donde estoy teniendo problemas Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas
por Sayury Obando López
| 32k xp | 12 posts
Technical support representative

Mi parte del código CSS responsive:

@media screen and (max-width: 940px) { h1 { text-align: center; }

nav { position: static; } .caja, .principal, .contenido-diferenciales, .video { width: auto; }

.mapa-contenido iframe { max-width: 100%; display: block; }

.lista-diferenciales { width: 100%; }

.imagen-diferenciales { max-width: 100%; display: block; }

.productos li { display: block; width: auto; }

.productos li img { width: 80%; } }

por Mariana Spinola Federico
| 455.2k xp | 1548 posts
Alura Scuba Team Instructora Front-End

¡Hola Sayury!

Gracias por compartir tus screenshots y explicar tu problema. Es posible que el CSS que estás utilizando para la página de productos no se esté aplicando correctamente. Una posible solución es revisar la estructura HTML de la página de productos y asegurarte de que los elementos tengan las mismas clases y etiquetas que los de la página de inicio.

Otra posible solución es revisar el archivo CSS y verificar que no haya ningún error de sintaxis o que no se esté sobrescribiendo alguna regla CSS en particular.

Si ninguna de estas soluciones funciona, es posible que necesites agregar algunas reglas CSS específicas para la página de productos para que se vea correctamente en dispositivos móviles.

Espero que esto te ayude a resolver tu problema. ¡Buena suerte y sigue adelante!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios