@godwinopara
@Yahyaabbakar92
Submitted
I seemed to struggle with the project so many times. I couldn't add "background-image: image-header-desktop;" so I resorted to using <img src="image-header-mobile" alt=""> as my image for both mobile and desktop and stretched them out on CSS using max-width, max-height and width and height. I'm sure there's a simpler way to do these things but that was the method that I used
@godwinopara
Posted
Ok
@Yahyaabbakar92
Submitted
I seemed to struggle with the project so many times. I couldn't add "background-image: image-header-desktop;" so I resorted to using <img src="image-header-mobile" alt=""> as my image for both mobile and desktop and stretched them out on CSS using max-width, max-height and width and height. I'm sure there's a simpler way to do these things but that was the method that I used
@godwinopara
Posted
when you added the image as a background image did you give the container a height and width because i struggle with background images also when i didn't know that height and width are required for them to work, and also probably next time instead you could also use the picture tag like this <picture> <source srcset="put the large image url here" media="(min-width: 800px)"> <img src="put the small image here" alt="" /> </picture> you can also add more screen sizes also check this mdn documentation for better explanation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Marked as helpful
@Babaneh1001
Submitted
Two things I couldn't implement
@godwinopara
Posted
to toggle(display the nav) the nav menu when you click on the hamburger menu is done with JavaScript but if you only know html and css you can watch this video here https://www.youtube.com/watch?v=8QKOaTYvYUA the understand more on how it can be done with html and css
Marked as helpful
