All comments

• 

  Matheus Chrispim Pelegrin• 30

  @MatheusChrispim

  Submitted over 1 year ago

  The biggest and worst difficulty was making the layout responsive for mobile, where there were several selectors that needed to be modified, I wanted to check with everyone if it is possible to modify this in a more practical way, so that when working in a responsive way, many adjustments are not necessary in CSS components and selectors.

  

  Results Summary

  2

  40

  

  Isfaqul• 330

  @Isfaqul

  Posted over 1 year ago

  Congratulations on completing this Challenge Matheus. You have done a good job of re-creating the desing.

  I understand the problem you mention regarding the responsiveness of the design. I see a couple of problems in your code -

  1. Do not set your body to a fixed width, because it will remain fixed at that and will not automatically resize based on your screen size.
  2. Body height, should be a set as min-height : 100vh. So, that at minimum it is 100vh and it can expand if required.
  3. Setting the width of your main container as 45%. The 45% is set basd on the parents width. If the parent is 100px, main will be 45px, if it's smaller, it will get even smaller. Instead set a maximum width, so that the main container will get have a maximum width of let's say 800 pixel. When the screen size shrinks, it will shrink down if possible.

  There are many others, but if you start here. I think you will have a good start. Keep learning, keep coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Shashikant Bharti• 30

  @ShashikantBharti

  Submitted over 1 year ago

  I want to know about my approach how I have built this project And the best possible approach to create this project.

  

  QR Code Challenge Solution Using flex box

  2

  70

  

  Isfaqul• 330

  @Isfaqul

  Posted over 1 year ago

  Congratulations on completing this challenge. You have done a great job already.

  A feedback from my end in regards to your question and overall is that, always try and use semantic HTML. I see you have used mostly used <DIV>. For the main container, you should use <main>

  For the Attribute, you could put it inside <FOOTER>

  And lastly, H1, H2, H3 should be used in order. We should prefer using H1 first and then H2, H3 and so forth.

  Again, keep up the great work, keep consistent and you will see results. Cheeers!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  juanpiza18• 60

  @juanpiza18

  Submitted over 1 year ago

  I am unsure of the card size.

  

  3-column-preview-card-component

  2

  40

  

  Isfaqul• 330

  @Isfaqul

  Posted over 1 year ago

  Congrats on completing the challenge!

  In order to tackle the size, you can create a draft FIGMA file for yourself and then work it accordingly. It is definitely not easy to gaze the size from the design file directly. But having a draft in Figma will help you get the proportions correct. If not, figma, any tool that you are comfortable with.

  Marked as helpful

  0