Skip to content
OverviewSolutions
3
Comments
2
P
Chris Eden
@Chriseden83

All comments

  • Chris Eden•60
    @Chriseden83Posted about 1 month 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 helpful
    0
  • Chris Eden•60
    @Chriseden83Posted over 3 years ago

    I 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