Responsive landing page using CSS grid, and flexbox

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Buen trabajo @Bobbyxxxxx

  In this specific challenge, the use of media queries is not really necessary. But here’s an example with your code:

  .qr-code {
      width: 90%;
      height: 250px;
      border-radius: 10px;
      padding: 0px;
  }
  
  @media (max-width: 450px) {
     .qr-code {
       height: 100px;
     }
  }
  

  In this example, your image has a class .qr-code and you are giving it a height of 250px. Additionally, with @media you are telling it that when the screen width goes from 0px to 450px, the image with the .qr-code class should be reduced to a width of 100px.

  The box-shadow property should go in the div with the class .container.

  PD: Try to place your CSS in a separate .css file and then import it into your HTML with the link tag in the head. Example: <link rel="stylesheet" href="css/styles.css">

  Marked as helpful

  0

  ---

  

  Adeyeye Abraham•10

  @BobbyxxxxxPosted 11 months ago

  @Blackpachamame thanks bro

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  Background 🌆:

  • You should not recreate the background, you used the image desktop-preview.jpg to create your solution, but that image is for decoration and is a nice way to present the challenge, for example, you can use it in your github README.

    You must use the images desktop-design.jpg and mobile-design.jpg to create your solution.

  CSS 🎨:

  • In this challenge there is no need to use a media query, for a responsive and resizable component, consider using max-width for the width and adding padding to avoid border touching the image. Also, set width: 100% for the image to fit the size of the component.

  HTML 🏷️:

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Adeyeye Abraham•10

  @BobbyxxxxxPosted 11 months ago

  @MelvinAguilar Thanks for the reply man.. I find this really helpful.

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 11 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

  ---

  • The alt attribute should explain the purpose of the image.

  ---

  • E.g. alt="QR code to frontendmentor.io"

  ---

  <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io" class="qr-code">
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0
• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 11 months ago

  Hi, here is some feedback. I'll start with your questions:

  "I still can't understand how to use media queries in this project. Please give me an example in code"

  You use media queries whenever you want the design to change. A typical example is to have 1 column on smaller screens, and 3 columns on larger - as the screen grows, there is more space available.

  "I am also unsure of my CSS box-shadow attribute that I used. Is it okay?"

  Looks fine to me. However, you want to set it on the card, which is the .container. So, move it from main to .container.

  HTML:

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  • "Improve your" is a heading, not a paragraph. Change it to a <h1>.

  • Do not use <br> to force text onto a new line. The text should flow naturally, and all styling, including space between elements, should be done in the CSS.

  • .attribution should be a <footer>.

  • The footer text needs to be wrapped in a <p>.

  CSS:

  • It is best practice to write the CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: <link rel="stylesheet" href="style.css">.

  • You should include a CSS Reset at the top of the stylesheet.

  • You don't need to set anything on the main. Move background-color to body and border-radius and the aforementioned box-shadow to .container. Remove the rest.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove the fixed widths and heights, including the one in %. Except for icons, you rarely want to set fixed dimensions(especially heights), as this easily creates issues with responsiveness.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • Add display: block and max-width: 100% on the image - the max-width prevents it from overflowing its container.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card.

  • Since all text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  Good luck :)

  0