My first Junior level challenge. Used basic HTML CSS JS and a bit of bootstrap. Haven't got much experience yet so I'm sure I could've done tons of things in a better way. Please look through the code and tell me what the better ways could've been. Any and all help is appreciated. Thank you :)
I was having problems with centering because of inheritance as I didn't want the containers data to be centered due to the design. However now I added text-align:initial to the container and everything works fine. I also added margins and better media queries for the mobile view now. Thank you so much !! :)
Hi everyone, the project requires two images. One to be displayed when in desktop view, and another to be displayed when in mobile view. I have a media query in css to handle the layout changes, but i'm a little lost with how to change the images over, any thoughts ?
Hey Dion, The way I did that is by putting both the images in the spot and then setting the display property as none of the img-mobile. I then added a media query wherein if the width gets below a certain limit then I display the img-mobile and set the display value of img-desktop as none and then further styled the img-mobile in the media query itself.
/* Images */
.img-desktop{ width: 100%; height: 100%; border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.img-mobile{ display: none; }
/* Media Queries */
@media (max-width: 992px){ .img-desktop{ display: none; }
.img-mobile{ display: block; height: 100%; width: 100%; border-top-left-radius: 9px; border-top-right-radius: 9px; } }
I only recently learned CSS and Bootstrap so I don't know if this is the optimal way of doing things but it worked for me. Hope this helps..
