All comments

• 

  FabricioIP07• 30

  @FabricioIP07

  Submitted over 1 year ago

  I have questions about how to make content responsive for mobile.

  

  QR code component using HTML and CSS

  4

  80

  

  lastiroko• 130

  @lastiroko

  Posted 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
• 

  Chukwu Felix• 40

  @felixicity

  Submitted over 1 year ago

  Please check it out to see if I missed anything or if my code can be improved in anyway. I will be grateful.

  

  Responsive Result Summary Component with Html and Css

  3

  30

  

  lastiroko• 130

  @lastiroko

  Posted over 1 year ago

  Looks quite good but you can give your body a

  display: grid;
      place-content: center;
      height: 100%;
  

  to place the whole content in the center(for desktop).

  You can also add a

  display: grid;
  place-content: center; 
  margin-inline: auto;
  

  to centralize the content in the scire circle. (edit as required for your code)

  0
• 

  Apah• 280

  @apah-dev

  Submitted over 1 year ago

  I'd love to know how to perfectly use the background-image gradient property to make it look just like the project. Especially for the circular button holding the result. And also on how to decide whether the main or the body should be a flex.

  I'd love any advice also to better deal with problems in the code.

  

  Result Summary page with flexbox and media query for responsiveness

  2

  80

  

  lastiroko• 130

  @lastiroko

  Posted over 1 year ago

  For the gradient use linear gradient. Like this:

  background-image: linear-gradient(hsl(252, 100%, 67%),  hsl(241, 81%, 54%)); 
  

  (edit with the right colors) Linear gradient colors goes from top to bottom firstColor = top, secondColor = bottom

  The main body can and can also be a grid but to get that format with a grid you have to set grid to:

  grid-template-columns: 1fr 1fr;
  

  but make sure you nest the two sections in one div and target that div giving it a grid and the grid-template-columns with the value above. You can also use bootstrap rows and cols.

  Lastly if the gradients are right you don't need to make the score circle fade.

  Marked as helpful

  0

  This comment has received 1 replyShow