Community feedback

• 

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 21 days ago

  Hey! good job!

  Solving Your HTML & CSS Issues

  1. Fixed Heights: Never ever set a fixed height to a container like the way you did here, because right now the content is out of the body & main, because what works in your screen does not always work for others, instead if you don't set a fixed height then it's gonna be fit-content and that's what you want right? I don't see any benefit of setting a fixed height, BTW you can use min-height in some cases where you really need kind of fixed height, it is like say your height is gonna be a range from min-height to fit-content, so no overflow and no height below min-height.

  2. Semantic HTML Elements

  Semantic elements improve readability and accessibility. Here's when to use them:

  • <main>: The main content of the page (one per page).
  • <section>: Groups related content within a page (e.g., a services section).
  • <article>: Represents a standalone, self-contained piece of content (e.g., blog post, news).
  • <aside>: Side content (ads, related links).
  • <header>: Introductory content (titles, navigation).
  • <footer>: Footer of a page or section.

  Example:

  <main>
    <section>
      <article>
        <h2>Blog Post Title</h2>
        <p>Content of the article...</p>
      </article>
    </section>
    <aside>
      <p>Related links or ads</p>
    </aside>
  </main>
  

  ---

  3. Customizing <li> Bullet Points

  You can change the bullet style using list-style-type or completely replace it with a custom icon.

  Example:

  ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
  }
  
  ul li {
    position: relative;
    padding-left: 20px; /* Space for the custom bullet */
  }
  
  ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px; /* Bullet size */
    height: 8px;
    background-color: brown; /* Brown color */
    border-radius: 50%; /* Makes it a circle */
    transform: translateY(-50%); /* Centers it vertically */
  }
  

  ---

  4. Fixed Space Between Two Words:

  To position words on opposite sides, use flexbox

  .flex-container {
    display: flex;
    justify-content: space-between;
  }
  

  <div class="flex-container">
    <span>Left</span>
    <span>Right</span>
  </div>
  

  ---

  5. General Advice for Responsive Web Apps

  1. Use Relative Units (%, vh, vw, em, rem)

     • Avoid fixed pixels for widths/heights.
     • Example: width: 80%; instead of width: 800px;.

  2. Use max-width Instead of Fixed Widths

     • Example: max-width: 1200px; margin: auto;.

  3. Use Flexbox & Grid for Layouts

     • Example:

     .container {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
     }
     

  4. Make Images & Videos Responsive

     • Use:

     img {
       max-width: 100%;
       height: auto;
     }
     

  5. Test on Different Screen Sizes

     • Use Chrome DevTools (Ctrl + Shift + I → "Toggle Device Toolbar").

  6. Use rem and em for Font Sizes

     • Keeps text responsive.

  7. Apply @media Queries for Responsiveness

     @media (max-width: 768px) {
       .container {
         flex-direction: column;
       }
     }
     

  ---

  Hope this helps! 🚀 Let me know if you need further clarifications.

  Marked as helpful

  1
• 

  nilikopo•110

  @nilikopoPosted 21 days ago

  Hi,

  Distance between <li> and marker: list-style-position: inside; and text-indent: -2rem; are blocking the way to put distance between list bullets and start of the sentence with using padding-left: 2rem; or padding-inline-start: 2rem;.

  It will also fix text aligning inside list.

  u can use pseudo-element ::marker to change the color of markers

  code i used

  .instructions-item::marker {
      color: var(--color-brown800);
      font-weight: 600;
  }
  

  Height of main element: i removed every fixed height in media queries and in main block: height: XXXrem in @media, height: 206.9rem; in main. Then i removed fixed height in html, body and set it to height: auto; and added additional padding-bottom: 4rem; to main element.

  Marked as helpful

  1

  ---

  

  AilaFelixx•80

  @AilaFelixxPosted 21 days ago

  @nilikopo Thank u soooooooo much :) I'll try it

  0