Skip to content
OverviewSolutions
9
Comments
10
Bright Adigwe
@Femi-Bright

All comments

  • Bright Adigwe•190
    @Femi-Bright

    To fix your accessibility issues, try to always wrap your whole content in a <main></main> or when you use a div, try to add a main role

    <body>
  <div role="main">
    ...
  </div>
</body>
    Marked as helpful
  • Bright Adigwe•190
    @Femi-Bright

    Hi! Lavishq, try to always precede your relative paths with ./ when you use only / it would work locally but might not work when hosted online

    Use this instead

    #perfume-img {
    background: url(./images/image-product-desktop.jpg);
  • Bright Adigwe•190
    @Femi-Bright

    Hi! mandresy, Nice attempt. I also deal with the sizing issues, finding the perfect sizing takes much of my time. I should also add this, try to fix the accessibility and HTML issues (you can do that in the View Report section)

    You can adopt using css variables so you don't have to keep repeating those color values. As regards what to learn next. Provided you have a sound knowledge of javascript, you can try React but make more personal research too,

    Marked as helpful
  • Bright Adigwe•190
    @Femi-Bright

    Hi Justin! NIce Attempt. Try to fix the Accessibility issues (You can do this in the View Report section). I noticed the web page is overflowing on my laptop thereby adding an horizontal scrollbar

    i want to suggest you remove the width, it should still work fine.

    .container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(30, 38%, 92%);
    /* width: 100vw; */
    height: 100vh;
}
    Marked as helpful
  • Bright Adigwe•190
    @Femi-Bright

    Hi Len! I think you provided a wrong URL as your live URL

  • Bright Adigwe•190
    @Femi-Bright

    Este es un muy buen intento MARTINCILLO. Incluso usaste el elemento figura, acabo de aprender esa idea ahora. Bonito👏. Espero que Google haya hecho un buen trabajo traduciendo esto.

  • Bright Adigwe•190
    @Femi-Bright

    Hi! Oluwakemi! Nice Attempts 👏. As regards the sidebar issue. I will suggest you add z-index to the sidebar to place it above the buttons

    .wrapper .sidebar {
    z-index: 50;
}

    I also noticed that the nav bounces whenever I hovered over a Link. You could correct that by this trick

    header ul li.menus {
    border-bottom: 5px solid transparent;
}

header ul li.menus:hover {
    border-bottom-color: (255, 125, 26);
}

    the bottom borders will always be there, so its not like they will be adding to the height of the nav each time you hover. I hope you find this helpful

    Marked as helpful
  • Bright Adigwe•190
    @Femi-Bright

    Hi Wesley, Lucas has already given a comprehensive explanation on max-width/min-width. Let me just add this.

    img {width: 500px;} You are telling the browser that "Hey! come rain, come sunshine, I always want this image to always be 500px even if the viewport width is 320px IDC"

    img {max-width: 500px;} You are telling the browser that "Hey! if there's enough space to make this image 500px fine! else feel free to scale it down as the viewport decreases. I just want it to have a maximum width of 500px"

    img {min-width: 500px;} You are telling the browser that "This should be the minimum width for this image at any viewport but feel free to scale it up if need arises"

    Nice, attempt btw

    Marked as helpful
  • Bright Adigwe•190
    @Femi-Bright

    This is very good but remember to fix your accessibility issue. I'd suggest you add a role="main" attribute to your card div

  • Bright Adigwe•190
    @Femi-Bright

    Your feedbacks are needed and will be appreciated 👌