Skip to content
OverviewSolutions
5
Comments
6
Mark Cates
@mscates

All comments

  • Nafsuki•245
    @NafsukiSubmitted almost 3 years ago

    This is my first Next.js project on Frontend Mentor. I used CSS modules and created a custom 404 page as a practice.

    My Questions:

    -My Screenshot somehow doesn't show #2 svg, although my vercel preview site has no problem showing it. How can I optimise that?

    -I've got accessibility issues & html issues regarding <img />. I'm using <Image /> component, so it automatically generates loading='lazy' attribute. Do I have to avoid this attribute to be generated?

    Any feedback & suggestion for improvement would be very much appreciated ☺️🙏!!

    Meet landing page using Next.js

    2
    Mark Cates•110
    @mscatesPosted almost 3 years ago

    Hi Nafsuki, I liked your solution. I did see a scroll bar on mobile though. you could add overflow-x: hidden to solve this issue.

    0
  • Ty•70
    @ItsIchiSubmitted almost 3 years ago

    Two challenges I ran into was first the HR I couldn't figure out how to get it anymore thin, and the second was the active state for the image I ended up just creating an overlaying div that acted as the hover state but if there's a better or more simple way to do so let me know!

    Responsive Card Component with Active states using CSS grid

    3
    Mark Cates•110
    @mscatesPosted almost 3 years ago

    for the opacity, you can wrap the image in a container and give it a background color and then when you hover over the container img:hover like this, you can use the mix-blend-mode: multiply with an opacity of say .6 and you can get the hover effect like on the design. here is some sample code to see how it works.

    <div class="example"> <img src="/images/image-equilibrium.jpg" alt="equilibrium" /> </div>

    .example { background-color: $primary2; height: 300px; border-radius: 10px; } .example img { max-width: 300px; width: 100%; border-radius: 10px; }

    .example img:hover { opacity: 0.6; mix-blend-mode: multiply; border-radius: 10px; transition: 0.5s ease; cursor: pointer; }

    Marked as helpful
    0
  • William Hernandez•90
    @WackLanternSubmitted almost 3 years ago

    Thank you for taking the time to view my code. It was a challenge trying to get the image's opacity right so the cyan background with the eye image would appear like in the sample. But I managed to figure it out. Any type of feedback is welcome. Again, thank you for taking the time to check out my code.

    opacity, max-width, max-height

    4
    Mark Cates•110
    @mscatesPosted almost 3 years ago

    one think to notice on your solution is the left part of the card all the way down. see how all the elements of the card design are lined up. the spacing between the left hand side of the card and the elements is the same. if you give the card itself a padding all the way around, this will resolve some of the issue.

    0
  • Priyanka Vasam•40
    @priyankavasam7Submitted almost 3 years ago

    Hey everyone!! I've already done this challenge, and now I've done this challenge again refactoring my code and fixing image issues. This challenge seemed easy but it's tricky. I got to know some basic fundamentals by taking up this challenge You can compare my both codes on this challenge.

    StatsPreview

    1
    Mark Cates•110
    @mscatesPosted almost 3 years ago

    Hello Priyanka, one thing I see is that your flex-container does not have a max-width so on a large screen your card is really big. what you could do is give it a max-width of say 1000px and then set each child of the container to flex: 1 so that each takes up exactly half the space. it will be more uniform that way. your mobile view is very good. great job.

    Marked as helpful
    0
  • arsalan farooq•30
    @arslan1070Submitted almost 3 years ago

    I got stuck when trying to make an overlay text and change the color when hovered. And still it's confusing for me so if anyone have a better way to it, please let me know. Thank you!

    Nothing special

    1
    Mark Cates•110
    @mscatesPosted almost 3 years ago

    have you looked at your solution on the web yet? the image is off center. what you can do is change the background-size to contain and add background-repeat: no-repeat and it will be centered. then change your padding to 9vh 0 and it will look better. I would also look into just using the img tag instead of the background image. might be an easier solution for you. also, you asked about the hover and you can do this with mix-blend-mode to easily do the hover action. hope his helps.

    1
  • Mark Cates•110
    @mscatesPosted almost 3 years ago

    Hey JC, the one accessibility issue you have is the h2, they want at least one h1 on each project we do. not a big deal, but if you want that to go away that is the solution.

    another thing I see is you could also make a card class that wraps the entire content and put a max-width on it of say 400px and then width of 100%. that way no matter how big the screen gets, it will only be 400px. right now, I have a large screen and it stretches your card out quite a bit because it doesn't have that limit. everything else looks great though. nice work.

    Marked as helpful
    0