Skip to content
OverviewSolutions
27
Comments
42

Jeuri Morel

@JeuriMorelBronx, NY, USA1,385 points

Started my coding journey in summer of 2020 and decided to concentrate on web development half a year later. Hoping to develop the skills necessary to get hired.

I’m currently learning...

HTML, CSS, JS

Latest solutions

View more solutions

Latest comments

  • Jeuri Morel•1,385
    @JeuriMorel

    The body element has a margin of 8px by default. This adds 16px to the width on top of the 100% of the attribution. Giving the body a margin of 0 fixes the issue you're having.

    The image isn't showing up when I view your site; check that you're properly linking it.

    Marked as helpful
  • Jeuri Morel•1,385
    @JeuriMorel

    You might want to try adding mix-blend-mode: multiply; and changing the opacity to 75% to the images to get them looking closer to the design. By the way, you don't have to use filter if you want to change the opacity of something, opacity is its own property (where 0 = 0% and 1 = 100%)

    Marked as helpful
  • Jeuri Morel•1,385
    @JeuriMorel

    To prevent the Sign In text from wrapping, you can give your lis width: max-content;. If you want to learn more about how this works you can read the docs here.

    As for the img color, I don't think you can change the fill of an svg that is brought in as an img, you'd have to add the svg to the HTML. If there were only one thing in the image I would tell you to use a filter, for example: filter: invert(1); But that inverts the color for everything in it, including the logo.

  • Jeuri Morel•1,385
    @JeuriMorel

    I personally like using clamp a lot as a way of handling responsive sizes. Don't know what widths the design calls for, but as an example I would give the card the following: width: clamp(320px, 20vw, 375px);. If you never used clamp before, the first value is the min-width, the third is the max-width, and the middle value is the preferred value. You can read more about it here. In my example it will calculate 20% of the screen width and assign that to the card, without going outside of the 320px and 375px range.

    Try not using margins as a way of centering items. You've already setup the body as a flexbox, but the reason the card isn't perfectly centered vertically is that the body isn't taking up the full height. To fix this give the body height: 100vh;

    Marked as helpful
  • Jeuri Morel•1,385
    @JeuriMorel

    Clicking on a notification makes the counter go up indefinitely but I'm pretty sure that the counter is supposed to represent the number of unread notifications. So it should start with how many of the notifications are in the unread state and decrease by one whenever those notifications are marked as read.

  • Jeuri Morel•1,385
    @JeuriMorel

    The easiest way to center an item is to make its parent a flex box, so I would give the body the following:

        display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    the min-height is so that it takes up the full screen. This will perfectly center the grid section once you remove the margin-top on it.

    The grid section appears to be too wide, so I would give it a max-width of something more pleasing and closer to the design, maybe 1200px or so.

    Marked as helpful
View more comments