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

All comments

  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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
    1
  • Lavishq•10
    @LavishqSubmitted over 2 years ago

    I want to know how can the code can be made better. Product image is not visible on github but was visible on localhost. I have studied responsiveness but failed to implement so I want to know some suggestions for getting better.

    Practicing CSS using Flexbox

    1
    Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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);
    2
  • mandresy andri•90
    @mandresyandriSubmitted over 2 years ago

    The difficult of this project are :

    1. Deal with the margin and padding
    2. Having exactly the same text size and with

    The css is the areas I'm unsure.

    I want to growth my front skills what is the next tech that I should learn ? React ? Angular ?

    Trying to solve the "QR code component" challenge

    2
    Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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
    1
  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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
    0
  • Lee Fentress•30
    @lee-fentressSubmitted over 2 years ago

    How would you make this responsive? Should I use grid instead of a table?

    HTML Table

    2
    Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

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

    0
  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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.

    0
  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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
    1
  • Wesley•330
    @wesleyjacobySubmitted over 2 years ago

    I mostly seem to struggle with resizing images. I've used the max-width property on the QR Code image, but should I have used the width and height properties instead? Does max-width and min-width have to do with responsiveness? The difference between these properties is something I need to research further.

    Mostly, I'm relatively pleased with the result.

    A QR Code Component using HTML, CSS and Flexbox

    3
    Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    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
    2
  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

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

    0
  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    Your feedbacks are needed and will be appreciated 👌

    0