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

Css Grid.Javascript. Flexbox

@whoiskekeanyway

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What is the size to make a page responsive to tablets?

Community feedback

argel omnes 1,800

@argelomnes

Posted

hey @whoiskekeanyway,

Tablet starts at 768px in dev tools. But I suggest resizing your viewport from your small breakpoint. See where it breaks and then adjust your layout. Your medium breakpoint might start sooner or might not be needed at all.

You're almost there. Some revisions are needed. I recommend starting with the fonts. Barlow should be used in some of the texts. E.g., navigation area.

For mobile, hamburger animation is nice. But about and services are not clickable due to the arrow overlapping them.

Marked as helpful

1

@whoiskekeanyway

Posted

@argelomnes Thank you so much, Argel for your feedback. I will fix the fonts for the navigation and other sections,

Please could you give me some pointers on how to fix the unclickable navigation?

0
argel omnes 1,800

@argelomnes

Posted

@whoiskekeanyway You can add a z-index to your nav so stays on top of the arrow.

Marked as helpful

0

@whoiskekeanyway

Posted

@argelomnes I am done with it. Thank you

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