Skip to content
OverviewSolutions
8
Comments
6
Jorge Flagel
@jorgeflagel

All comments

  • Jorge Flagel•195
    @jorgeflagel

    Hi Nafriah, check the page between 380 and 680 px width, it is not showing well. Also, check the height of the card on mobile screens, it is too height (95vh for each card), and the width on tablet screens is too small (maybe a similar layout as the mobile screen would show better).

    I recommend you to play with the width of the browser and see how it looks, or with the developer tool where you can select in which kind of screen you want to see the page.

  • Jorge Flagel•195
    @jorgeflagel

    Hi, you have align-items: center and height: 100vh in the body. You need to eliminate the height.

  • Jorge Flagel•195
    @jorgeflagel

    Hi, the warning pop up because you don't have a label tag in the inputs. If someone that has vision problems needs to access the site using a screen reader, he/she won't know which input is required (a password? a name?). If the design doesn't require a label tag, you have to add an aria-label property, for example:

    <input aria-label="last name" type="text" placeholder="last name" required>
<input aria-label="Email Address" type="email" placeholder="Email Address" required>
<input aria-label="password" type="password" placeholder="Password" required>

    When the screen reader focuses on the input, it will read the aria-label and the person will know what is required.

    Hope it helps.

  • Jorge Flagel•195
    @jorgeflagel

    Hi, I have just read this article from Josh Comeau about transitions. I think it resolves the problem you had with the drop-down link. Check the section about Delays, he uses

    .dropdown {
  opacity: 0;
  transition: opacity 400ms;
  transition-delay: 300ms;
}
.dropdown-wrapper:hover .dropdown {
  opacity: 1;
  transition: opacity 100ms;
  transition-delay: 0ms;
}

    I think you can adapt the example to your page. I hope it helps.

  • Jorge Flagel•195
    @jorgeflagel

    Hi, congratulations for your first challenge.

    A tip: you should use background-image: url(<image-url>) in the css file for your background images. You can position the background images with background-size and background-position. I think it is a better practice.

  • Jorge Flagel•195
    @jorgeflagel

    Hi, good job! It looks nice.

    For the problem with the images, maybe you can add display: none in the div that contains the image for desktop screens and use the background-image property on the divs .firstFeatures, secondFeatures, ...

    With background-position and background-size you can position the background-image in the right place.

    This is the way I solve these kinds of problems. Hope this can help you.