Submitted about 2 years ago

Responsive and Built with Html5, CSS, FlexBox and Mobile-first

Macaulay Omoikhoje De-great• 490

@MacChristo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Clipboard landing page

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I still have issues with having enough space at the bottom at different screen sizes. Any suggestion would be nice. Thanks.

Community feedback

Harsh Kumar• 1,390

@thisisharsh7

Posted about 2 years ago

Hey Macaulay, Good work! your solution looks awesome. In order to answer your query regarding enough space at the bottom at different screen sizes, I go through your solution CSS code and I found padding-bottom: 100%; in the body tag and padding-bottom: 6em; again in body with media query at 700px . I suggest you to remove these because they are creating extra blank spaces at the bottom and affecting the overall design of the webpage.

I hope this clears your issue..

Marked as helpful

Macaulay Omoikhoje De-great• 490

@MacChristo

Posted about 2 years ago

@thisisharsh7 I get what you are saying. But when I view the solution in devices with fixed heights, without those padding-bottoms, some contents usually get cut off at the bottom. Like a device with(width:375px, Height:548px), it displays all content. Then in maybe(width: 375px, height: 700px), the bottom content get cut off at 100% zoom. And the only way it will show full content is to zoom out on your device. That's the reason I always add those padding-bottoms.

Tiago José• 300

@tiago-jv0

Posted about 2 years ago

Hello Macaulay, great job solving this challenge, here are some tips that you can use to improve your code :

Your page should have only one h1 tag, you should take a moment to consider about the relevance of your texts and give them a properly use of the HTML tags
Give a chance to the BEM methodology, it will help you and others understand the context in which elements are being used and about its styling and possible states
Improve your SEO by using correct landmarks to better match your content sections, I really like that you've used main and footer, however, you should separte the sections of your website with the section tag

Great Job and continue coding, you will be a great developer in the future!

Marked as helpful

Macaulay Omoikhoje De-great• 490

@MacChristo

Posted about 2 years ago

@tiago-jv0 Thanks a lot

Please log in to post a comment

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