QR code component using HTML and CSS

First and foremost, create external file for your CSS and link it the the head section of your html using the <link tag>

Example: if you save your external css file as “style.css” then in the head section of your HTML, link your external style sheet with the below tag

Now back to you question about media queries.. Media queries are used to change the css property or layout of a page depending on the screen size. You have to learn the various breakpoints for all devices.

The best way to learn is by watching tutorial videos on YouTube and make notes. (I strongly recommend Kevin Powell YouTube channel) and or register for a css media query course on Coursera.

Dedicate a few days to learn media query and you won’t regret the decision.

To make responsive content you can us bootstrap but I personally prefer Media Querry it give you more control. here is an example.

@media only screen and (max-width: 375px) {
    /* CSS rules to apply when the screen width is 375px or less */
    html, body {
      margin: 0; /* remove the default margin */
      padding: 0; /* remove the default padding */
    }
    .container {
      width: 90%; /* this targets your main div which everything else is nested in, It adjust the width of the container */
    }
    h1, p, h2 {
      font-size: 18px; /* reduce the font size of the headings and paragraphs */
    }
  }

make adjustments as required

Hey, I would separate your CSS from your HTML in its own file, then link it in the head of your HTML file.

You want to keep your structure (html), style (css), and behavior (javascript) separate files. It will make your life easier on bigger projects.

for this you dont need to make it responsive its already responsive