QR code component using HTML and CSS

Community feedback

• 

  Solomon King•100

  @Solomonking007Posted over 1 year ago

  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

  <link rel=“styleshert” href =“style.css”> Then you have successfully linked your css file to your html. This makes it easier to maintain your webpage as it scales larger. Bugs can be easily detected and fixed too.

  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.

  Marked as helpful

  2
• 

  lastiroko•130

  @lastirokoPosted over 1 year ago

  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

  Marked as helpful

  1
• 

  Durban86•320

  @Durban86Posted over 1 year ago

  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.

  1
• 

  beesou777•30

  @beesou777Posted over 1 year ago

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

  0