QR code page using html and css

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hey Idev congrats on finishing the challenge!

  There are some little problems with your App, you are trying to position every element of the layout using position: absolute and position:relative, you should never do that in general and just use it some rare cases!, have you tried using flexbox to position your elements? in this case for example you could do something like this:

  • First of all, remove all of your position statements from all the elements, you want to avoid as much as possible using position.

  • Now that we have everything reset lets go with the flex!

  • Use flex on the body to position your component in the middle of the screen like this:

  body {
    margin: 0;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  With this code we got the body to size the whole screen (100vh means full screen of your webpage), we called flex and used align items and justify content to get the child centered (in this case the child of body is the whole component).

  • Ok now we have our component on the middle of the screen, lets position all the elements in the outer-frame div, lets use flex again then!

  #outer-frame {
    background-color: hsl(0, 0%, 100%);
    width: 320px;
    height: 500px;
    border-radius: 20px;
    box-shadow: 0px 10px 60px hsl(211, 20%, 79%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  With this we did the same as before, since you have some margins and paddings, using justify-content: center will get all the childs together but will be separated by the margins and paddings that you previously defined!.

  Want to learn more about how awesome is flex-box? Play flex-box-froggy When you are done with it, maybe you find more complex layout that can be done with flexbox, go ahead and try CSS grid, you can practice it with grid-garden

  Marked as helpful

  1

  ---

  

  Idev•200

  @IDev11Posted over 2 years ago

  Hey @DavidMorgade, thank you for giving me a little bit of your valuable time, your comment was really helpful, to be honest I didn’t finish learning css, and guess what! My next lecture is about flex! I will definitely correct my code when I finish it! Thank you very very very much 😁

  1
• 

  Eduardo•910

  @KTrick01Posted over 2 years ago

  Hi! Your page probably isn't showing up because your main html have to be named as "index.html" and not "index1.html"

  Marked as helpful

  1

  ---

  

  Idev•200

  @IDev11Posted over 2 years ago

  Hey @KTrick01, thank you your feedback helped me, I changed the name to “index.html” like you've mentioned before. Thank you again!

  0

  

  Eduardo•910

  @KTrick01Posted over 2 years ago

  @IDev11 Now i can see your site! The main difference between your design and the example is that the title in the example has a font-weight: bold;

  Marked as helpful

  0

  

  Idev•200

  @IDev11Posted over 2 years ago

  @KTrick01 yes I noticed that hahaha, I will change it.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello @IDev11, congratulations for your new solution!

  Your page is not displaying the correct page, you need to change the settings for Github Pages. I can see that you're having some issues to setup the Github Pages. In my first days I tried to use Github Pages too but was too hard to setup, doesn't helps if you're a beginner like us.

  My advice for you is to use vercel.com or netlify.com that are really easier platforms for live sets and totally user-friendly, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Really fast.

  The easy one is Vercel and is the one I use for my solution.

  👨‍💻 Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Idev•200

  @IDev11Posted over 2 years ago

  Hey @correlucas, thank you your feedback was really helpful, I used vercel like you told me. Can you check it out again, please? And thank you very much!

  0