Skip to content
Submitted 12 months ago

QR code component using vanilla HTML CSS with media queries

irfanqs•10
@irfanqs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

how to write media queries properly ?

Community feedback

  • Lartzmanuel•190
    @LartzmanuelPosted 12 months ago

    Media queries in CSS are used to apply different styles for different devices or screen sizes. They allow you to create responsive designs that adapt to various devices, such as desktops, tablets, and mobile phones. Here's a general structure for writing media queries:

    @media only screen and (max-width: 600px) {
  /* Styles for small screens */
}

/* Media query for medium screens (e.g., tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Styles for medium screens */
}

/* Media query for large screens (e.g., desktops) */
@media only screen and (min-width: 1025px) {
  /* Styles for large screens */
}

    If you use a mobile workflow first, note that the initial styles you write before any media query will be for mobile screens. You can read more about media queries here

    I hope I helped :)

    1
  • Øystein Håberg•10,530
    @Islandstone89Posted 12 months ago

    Hello, you have done a decent job here. Let's see how we can improve your code even more.

    HTML:

    • Alt text also needs to say where it leads (frontendmentor.io), as this is relevant information.

    • .title is not a paragraph, but a heading. Change it to a <h1>.

    • .attribution should be a <footer>.

    CSS:

    • It's better for performance that you link fonts in the <head> of the HTML, instead of using @import.

    • Make a habit of including a good CSS Reset at the top of your stylesheet.

    • I don't think you need to set height: 100vh on both html, body and main. I would change it to min-height, and only have it on the body. I would also move the flex properties over there.

    • Another property you should move to the body is text-align: center, since all text should be centered.

    • Remove the fixed width on the card. Setting fixed dimensions is the easiest way to create issues with responsiveness.

    • Do add a max-width of around 20rem, to prevent the card from getting too big on larger screens.

    • Remove everything except border-radius on the image. The image can't be a flex container, since it has no children.

    • Add max-width: 100% and display: block to the image. A max-width of 100% will prevent the image from overflowing its container.

    • Regarding media queries, you actually don't need one on this challenge. Whenever you do, remember to have them in rem instead of px. It's also common practice to do mobile styling first, which means a media query would have a min-width, not a max-width.

    Hope this helps. Good luck!

    0

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