Skip to content
Submitted about 3 years ago

Landing page with Responsive Navbar

Matias•170
@MatiasEmiliano
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I had to use JS to change the images. Is there any other way to get it? And what about the desing, Any sugest?

Community feedback

  • adeline•170
    @adelinejunePosted about 3 years ago

    Hi Matias

    to change the image depending on the screen size you can use the <picture> tag here is an example of picture tag in HTML

    <picture> <source media="(min-width: 750px)" srcset="./images/desktop/image-graphicdesign.jpg"> <img src="./images/mobile/image-graphic-design.jpg" alt="transform-img"> </picture>

    you can head over to stack overflow (https://stackoverflow.com/questions/30460681/changing-image-src-depending-on-screen-size) for more information

    Hope it helps !! 😆

    Marked as helpful
    0
    Matias•170
    @MatiasEmilianoPosted about 3 years ago

    Thanks Adeline! It really helps!!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord