Skip to content
OverviewSolutions
8
Comments
6
Jorge Flagel
@jorgeflagel

All comments

  • nafriah•10
    @nafriahSubmitted over 3 years ago

    This is one of my very first projects on Frontend. I'll like recommendations on what I could do better.

    Also, the favicon is not showing. Any ideas on how to fix it is welcome.

    Thank you, yes you, for responding.

    Responsive 3-Column Preview Card

    1
    Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    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.

    0
  • George•10
    @georgeloweSubmitted over 3 years ago

    Hi,

    Does anyone know why when I use a device with a small screen and my flex-direction is set to column, the cards are off of the screen in the vertical direction?

    Thank you, any advice would please be appreciated

    3-Column Preview Card Component (Flexbox)

    2
    Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

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

    0
  • Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    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.

    1
  • Matthew•295
    @CodingDatumSubmitted over 3 years ago

    I tried to make the drop-down links a hover state event, but they would rapidly close and open as I scrolled the mouse down. I tried pointer-events: none for the child elements to no avail. Any help would be much appreciated! thanks :-)

    HTML CSS Flex basic JavaScript no Mobile section yet

    2
    Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    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.

    1
  • mbarons•10
    @mbaronsSubmitted over 3 years ago

    I think I'm using too much of relative positions, I'm not sure that is a good practice. Can someone take a look please?

    CSS Grid, Flexbox

    2
    Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    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.

    1
  • Salko Balić•40
    @thedev966Submitted over 3 years ago

    It was a fun and quite easy challenge for me. However, there are some parts where I struggled a bit. I'm firstly looking for an overall and honest opinion from you and if you can suggest me something I could/should improve. I've had hard time trying to make those grid and background image assets responsive so If anyone has a good idea or solution, please share. I've tried to use width, height and position of images in percentage or vh/vw but it didn't turn out to work as I expected.

    Fully Responsive Website Development using HTML/CSS and a bit of JS

    3
    Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    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.

    0