Responsive landing page

Community feedback

• 

  Curtley•120

  @curtleyAk

  Posted 2 months ago

  Well Done! You did well. You need to remember the parent-child relationship. Example: in your 'body' you 'display: flex;' which is great, but this also means the children contained within the 'body' will also adopt the new positioning type, so it's unnecessary to place it again in the '.container' div.

  Also, if you apply the font family to the 'body' element, you won't need to repeat it in the H1 and p elements.

  00

  Marked as helpful
• 

  P

  Michael•180

  @Networksentinel

  Posted 2 months ago

  Hi, if you would like to write more simple CSS code (and less lines) you could use very common shorthands.

  This is your code from style.css:

  p {
    font-size: 15px;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 10px;
  }
  

  You can achieve the same result with this code:

  p {
    font: normal 15px "Outfit", sans-serif;
    font-optical-sizing: auto;
    text-align: center;
    margin: 10px 30px 0;
  }
  

  The font shorthand packs multiple font-related properties into one line:

  font: [style] [weight] [size]/[line-height] [family];
  

  Similar for the margin shorthand:

  margin: top right bottom left;
  

  BONUS TIP

  Margin shorthand rules - depending on how may values you define:

  • 1 value: applies to all sides → margin: 10px; → top, right, bottom, left = 10px

  • 2 values: → margin: 10px 20px; → top/bottom = 10px, left/right = 20px

  • 3 values: → margin: 10px 20px 30px; → top = 10px, left/right = 20px, bottom = 30px

  • 4 values: → margin: 10px 20px 30px 40px; → top = 10px, right = 20px, bottom = 30px, left = 40px

  NOTE: the exact same logic as for the margin shorthand applies for padding, border-width, border-style, border-color, inset, border-radius

  I hope this helps! Keep up the good work :-)

  00

  Marked as helpful