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

Meet Landing Page

Yuko-code• 235

@Yuko-code

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my 8th FM challenge. I couldn't display the number thing (the ones in circles with vertical line on top) at the bottom properly.

Community feedback

Edgar Badillo• 215

@EdgarBadillo

Posted

Hello nice day.

I did this challenger 2 weeks ago and you have same mistakes as me.

--- you have a side scroll (x axis) in all your resolution (mobile, pad, and desktop) is not a big deal but you can resolve this looking for you element wider than others. I found it and is your .header-img. your img has 414px width and your body has 360 px. fix you image and the side scroll will dissapear.

--i use a main container for all my code (.container) is better that only body.

-- on .number. maybe you can change to relative to fix you .one. --your div footer, you can use a z--index .9999 to overplace you .div one. because circle is still visible.

--my mian problem on this challenger was classes name. Try to use a BEM methodology on your next challenges. Is not necesary but will helpyou to have a excelent organization on your classes names.

Soryy for my english, have a nice day.

Marked as helpful

0

Yuko-code• 235

@Yuko-code

Posted

@EdgarBadillo thank you for your feedback, I’ll look into them. Great advice I appreciate it!

0
eagermonument81• 210

@ixtk

Posted

You can remove the padding and add display: grid and place-items: center to center the text in the circle. Give the bottom one white background color.

There's horizontal scrollbar at about 1200px

Marked as helpful

0

Yuko-code• 235

@Yuko-code

Posted

@ixtk Thank you for the advice this is what I needed :)

0
P
Grace• 27,870

@grace-snow

Posted

Hi

It looks like you need to pay closer attention to details of the design like

  • font weights
  • alignment between sections (whole page alignment)
  • font sizes (especially on mobile- buttons are unreadably small)

Marked as helpful

0

P
Grace• 27,870

@grace-snow

Posted

Also it’s very important to address the accessibility issues raised in your report. Pay close attention to html semantic structure

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