Skip to content
OverviewSolutions
22
Comments
14

Daniel Muri

@dmuriOslo440 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Daniel Muri•440
    @dmuri

    Hi there 👋

    Really nice work, for the image swapping it is considered best practise to use picture and srcset tags. See an example below

        <picture>
        <source media="(min-width: 800px)" srcset="large-image.jpg">
        <img src="small-image.jpg" alt="Description of image">
    </picture>

    Here the "large.img will be used for screens wider than 800px and small will be displayed on screens under that.

    Here is an article on the topic: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

    Keep up the good work my friend!

    Happy coding!

  • Daniel Muri•440
    @dmuri

    Hi there 👋

    Well done, really nice work! A small suggestion would be adding a max-width property inside the media query as the main content gets quite streched. I would also consider changing the break point to around 750px, but that is of course a matter of taste.

    Happy coding!

  • Daniel Muri•440
    @dmuri

    Hi there, well done!

    It looks like you are trying to center the whole component. Adding a min-height:100vh to the body, is the only thing missing for that.

    body { 
   min-height: 100vh;
}

    Hope that is helpful :)

    Happy coding!

    Marked as helpful
  • Daniel Muri•440
    @dmuri

    Hi there 👋

    Well done! Looks like the github-link is to an empty repository.

    Happy coding!

  • Daniel Muri•440
    @dmuri

    Hi there! 👋

    Well done! A small suggestion would be to add the background-color to the body element to avoid the grey background cutting off on wider screens.

    Happy coding!

    Marked as helpful
  • Daniel Muri•440
    @dmuri

    Hi there, well done!

    It looks like site has some issues with the font. You can easly add this to your site by two small changes in the html and css.

    HTML, in the header tag:

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    CSS:

    body {
   font-family: 'Outfit', sans-serif;
}

    I would recommend watching a video on adding fonts with "Google Font" to a project. https://www.youtube.com/watch?v=eLY5KSXcQ6c&ab_channel=RosemaryBarker

    This one is a short nice introduction to it.

    Happy coding!

    Marked as helpful
View more comments