Submitted about 2 years ago

Responsive landing page using CSS Grid and Flexbox

Sedef Çakmak• 190

@sedcakmak

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

This is a solution for...

Agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I ran into two bugs in Chrome which I couldn't find a solution for:

The font-sizes don't reflect the actual value. Also, the SVGs for the social media icons sometimes don't show up.

Both of these work on localhost Chrome and Chrome mobile as expected, but works arbitrarily on live site desktop Chrome. (It works on Safari and Microsoft Edge)

I'd appreciate any feedback regarding these.

Community feedback

faizan• 2,420

@afaiz-space

Posted about 2 years ago

Hey @sedcakmak,

Replace height:100vh with min-height:100vh; of the body element.
add padding:10px; and gap:20px in the .testimonials class. also, remove the margin (left and right ) from the .testimonials class of media query.
Remove width: 84%; from the .testimonials-item class of media query.
Remove position, top, left, and transform from .attribution class. also, add margin: 10px;andtext-align: center;`in the .attribution class.

Marked as helpful

Sedef Çakmak• 190

@sedcakmak

Posted about 2 years ago

Hey @afaiz-space,

Thank you for your feedback. Giving min-height:100vh to body element solves many issues, but unfortunately breaks down the header and the arrow both on mobile and desktop. I tried to fix that by changing the padding and background-size, background-position, but didn't work:( You can see desktop and mobile images here. I may need to add another div to solve that problem.

But thank you for the advices on .attribution class.

mubizzy• 1,520

@mubizzy

Posted about 2 years ago

Excellent job on this challenge! your report has a few issues though:

wrap everything in your body in <main> or use semantics

2. it is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region.

Hope it helps:)...don't forget to mark it as helpful 👍

You can get more details here...click here

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