Skip to content
OverviewSolutions
5
Comments
2
Gerard Davis
@gerardguydavis

All comments

  • Gerard Davis•105
    @gerardguydavisPosted about 3 years ago

    Just a few thoughts:

    The animation on your hover selectors looks great, as does your sliding nav menu! They're all really smooth transitions.

    It looks like from the comments in your CSS that you’re working from a mobile-first approach, which is excellent! But you’re using a lot of different breakpoints with both min-width and max-width for various sections of your page. That can possibly make your code buggy and a little tricky to read. For a landing page like this, best practice may be to use no more than 2 or 3 breakpoints, and for a mobile-first approach, you may want to consider sticking with just min-width. (A simple example would be to use min-width: 768px for all of your tablet styles and min-width: 1024px for all of your desktop styles.)

    I’m not quite sure what’s causing your section two text to drop into the section below, but it looks like it may have something to do with using flex column and a relative position. Your HTML organization in this section looks good, so maybe using your min-width for desktop with flex-direction row and position initial (Are you trying to remove the absolute positioning with relative?) will help to keep it within its div.

    Also, just to be super nitpicky, some of your commented out lines are duplicates of lines that are being used (Ex: Lines 275 and 283). Make sure to go through your code and check for these sorts of duplicates, it’ll make reading and editing your code waaay easier in the long run!

    Otherwise, it’s looking really good!

    Marked as helpful
    1
  • Gerard Davis•105
    @gerardguydavisPosted over 3 years ago

    This looks good! I noticed that your cards become uneven when widening the desktop display. You can get them to stay in the 4x2 layout if you set a width to the cards section, or by adding margins to the cards instead of using space-between.

    0