Responsive Landing Page using CSS

Community feedback

• 

  Tushar Sharma (波風ミナト)•100

  @itundefinedPosted almost 2 years ago

  it's nice the only thing you may need to change is the width and height of your box element, it's static right now which is 200 or something which may cause problems in bigger screens, for example, a 32inch screen will not be able to see what is that you've written in the box in some cases user will have to change its zoom level which is not a good UI experience, make it dynamic the width and height using the min-width instead of width and make you can change it to let maybe's say 25% on a larger screens and as well as the font should be bigger as well on larger screens.

  Marked as helpful

  1
• 

  P. Ricardo•2,370

  @pRicard0Posted almost 2 years ago

  Your project must contain a main instead of a div with the "container" class. You can also use section instead of div. A section for image and a section for the content, etc... This way, your HTML becomes more semantic.

  You aren't using the right font and the paragraph font size should be 15px.

  You should have used h1 in the text with the bigger font size.

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and wrap * Improve your front-end skills by building projects* in <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html.

  Use the font-family that was given in the styleguide.md.

  Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding:15px

  Increase the width of .box for it to be equivalent to the width of the design. width:320px and give the img a max-width of 100%.

  Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  Fabianthorsen•170

  @FabianthorsenPosted almost 2 years ago

  Hey, great solution! A small tip for me in regards to the sizing of the box component. In css there is a calc() function that lets you make calculations using numbers, variables, etc. For this solution you could use a the minimum width 360px calculated with the approximate size you want your .box to take of the entire scree. So the css could look something like calc(360px * 0.7) to get 70% of the minimum width. Hope you find this helpful, good solution! :D

  0