Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML + CSS Notification page

@BernardoHollmann

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I think I am getting the hang of it =)

I just couldn't figure out how to adjust the last 3 notifications as the rest of the layout. Its a little bit funky. Can someone please help me see what is wrong?

Community feedback

@joangute

Posted

Hi Bernardo, it seems not all of the 3 last notifications have that problem, it is just the Kimberly Smith notification.

You have the size of your img tags relative to the container width(max-width:50%), but since that specific notification has three elements, it gives the div with class="image" less space than the other ones and so the img tag is smaller and looks like is more to the left.

You can set up a specific max-width as 40px or any size you want and add to your 'image' class a "padding: 0 1rem". Then you can change your align-items and your justifify-content to improve the result. That will fix the problem.

Marked as helpful

1

@BernardoHollmann

Posted

@joangute Thanks, friend! That worked perfectly!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord