All comments

• 

  Tyrone Robertson• 230

  @Roneeey

  Submitted almost 2 years ago

  1. In order to get the text to match with the example exactly, I used margin on the title and text classes to make the text appear more indented in line with the image above. I also needed to ad a <br> in the HTML before the word third last word. (See snippet below). Is there a better way to have achieved this?

  2. Any points to make this code more effecient (besides colour variables)? I know it is probably too small of a project to add advice for this. Could I expect any formatting to be thrown out by adding css to classes that perhaps were not the best option to add them to?

  3. Although I used flexbox.align-items property the space at the top of the page seems slightly larger than at the bottom. Is this just me?

  SNIPPET FOR POINT 1. ABOVE.

  <p class="text">
            Scan the QR code to visit Frontend Mentor and take your coding skills
            to
            <br />
            the next level
          </p>
  

  

  QR Code Newbie Challenge

  3

  40

  

  Jen M• 130

  @jenmurph4610

  Posted almost 2 years ago

  Great job!

  One note would be that some of your classes are unnecessary here. For example the .title class can be targeted in the CSS with the h1 selector that it already has instead .

  The div 'container' can be eliminated if you use the body tag to target the same properties in the CSS as well.

  Just a couple of notes on first glance. Nice job on replicating this though.

  Marked as helpful

  1
• 

  Renardo PIne• 10

  @Underworl

  Submitted about 2 years ago

  1)How do I center the main div vertically without margin or hard-coded values? 2)I styles the images and text before I worked on the position of the main div. Is this a bad way to do it? 3)I used the hsl values provided in the styles guide but my text editor Caret kept telling me a fallback value should be provided with hsl. What does this mean and what should I do?

  Answers to any of these questions will be greatly appreciated. Thanks for checking out my solution.

  

  QR code component using HTML and CSS

  2

  30

  

  Jen M• 130

  @jenmurph4610

  Posted about 2 years ago

  Hi @underworl, nice work!

  I found the use of the flex display property helpful in my version of this project, thanks to feedback I received. It made it so much easier to center the items within the body, but also center the items within the 'card' itself.

  You could get rid of the divs within .container and leave just the three elements (img, p, p) within one div themselves. Arranging them with flex within that will then be easier. I was able to eliminate a lot of margin properties and such from my CSS when I did this.

  Your first <p> should probably be a heading like <h1> too, I think that will eliminate one of your errors in the accessibility report, but with that you could also simplify more and eliminate the classes from all three and just target them with the selectors since there would be only one of each type.

  I tend to work on the same before I work positioning as well. It seems to work well for me too but curious to see what others might input on that.

  0

  This comment has received 1 replyShow
• 

  Jonas Felix de Souza• 20

  @Jonas-petty

  Submitted about 2 years ago

  1. There's a small space underneath the image on the desktop layout, I tried many things to solve it but failed, I would like to know a solution for that matter.

  2. I see that on the desktop layout the image and the information have the same width, in my code the information is slightly wider, I would like to know I a could've done different.

  Thank you!

  

  Responsive page using display flex, picture tag to alternate images

  5

  50

  

  Jen M• 130

  @jenmurph4610

  Posted about 2 years ago

  Hey Jonas, nice job!

  I had the same issue with the white space under the image. Some google searching brought me to this article that explained and helped me with it: https://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php

  One other tip, I see you have the word 'perfume' spaced out in your HTML. You can also use the letter-spacing property to accomplish this in the CSS and control how much or little spacing in between.

  Marked as helpful

  2