Hola amigos,
Me faltan 2 cosas a mejorar:
La línea inferior de la imagen que el de color morado no debe estar, pero no he podido quitarlo.
No he podido cambiar la imagen para desktop, sólo he usado la de mobile.
Si me pueden ayudar a arreglar estos 2 problemitas. se los agradezco mucho.
1.La linea morada que mencionas es en realidad el backgound color que le aplicas al div de clase "section-header", contenedor de la imagen, y para que no aparezca segun vi hay dos formas: a. Dandole un display block a la imagen y aplicandole un height del 100% .section-header-image { width: 100%; border-radius: 8px 8px 0 0; opacity: .5; display: block; height: 100%; } b. Esa o en el propio section header dejando el height de 240px, que me parece que esta comentado 2. Para cambiar la imagen segun el ancho de la pantalla se me ocurre hacerlo via javascript, cambiando el atributo src de la imagen,segun el ancho de la pantalla o si quieres hacerlo via css, no usarias un elemento img, puedes hacerlo directamente en el div "section-header", con la propiedad background-image: url(....), para posteriormente, usando media queries cambiar dicha propiedad
I had difficulty in setting specific device width. All feedback is welcome
In order to set differents screen widths, you can use media queries, specifying styles in the breakpoints you set. About file organization, It will be better if you save the images in a different folder than the proyect root
I like the hook you made to controll the size of the window, very usefull, also the file structure, good job. But it have little delay when changing between routes, and homepage is not well sized
