Chris Eden
@Chriseden83All comments
- @MarziaJaliliSubmitted about 2 months ago@Chriseden83Posted about 2 months ago
One thing that helped me when undertaking the project was using the HTML picture tag for two different images rather than javascript. You can set a min width of when it should change. The first source is when the picture should change along with the source as I planned for mobile first this was the desktop image, the fallback is the primary mobile image, see here:
<picture> <source width="730" height="300" media="(min-width: 48em)" srcset="./assets/images/image-web-3-desktop.jpg"/> <img width="343" height="300" src="./assets/images/image-web-3-mobile.jpg" alt="hero image showing building blocks" class="feature__image" /> </picture>
Try adding a no scroll class on the body so you cannot scroll when the hamburger menu is open.
The layout starts to collapse into other elements around 760px so maybe try using the mobile / tablet version upto 700px and desktop after that?
I think you've done a good job, just a few things to look at for future projects
Marked as helpful0 - @DaysseSubmitted over 3 years ago
Didnt know how to responsive it :'(
@Chriseden83Posted over 3 years agoI find it's best to build using a mobile first approach then use @media adding a breakpoint for different devices but that's my preference.
Take a look at https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/ this should give you an insight into responsive design. Kevin Powell also has some great youtube videos on responsive design.
It's best to add the background images inside the CSS file using background-image property as you have one image for mobile and one for desktop devices.
0