Skip to content
Submitted over 4 years ago

Loopstudio landing page CSS Grid, Sass, BEM and AOS

Marta•630
@martam90
A solution to the Loopstudios landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi,

This challenge looked easy, however, there was some tricky parts for me.

I have difficulties with a white-border box below menu (immersive experiences...). It does not look well on very small screen below 360px. Do you have any suggestions how to improve it? My second question is - should I bother myself how the website looks on IE? My website is completely broken on IE beacuse of CSS Grid and picture tags I have applied. In one hand, frontend dev should create websites that look decent on every browser. On the other hand, why should I write a much more code and avoid using benefits of modern CSS. What is your opinion?

Thank you :)

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, once again, Marta! 👋

    Of course—it's nice to see you complete another challenge! 😀 Nice work on this one! 👏 I like the on-scroll animation you added to the introductory section! 👍

    I only suggest perhaps decreasing the height of the hero section in the desktop and mobile layouts (it seems quite high, at the moment).

    As for the text in the hero section, you might have to decrease the font-size of that just a tad to prevent overflow issues on very small mobile devices.

    I'm not an expert, but I don't think you have to worry too much about IE—it's very, very old by now and most developers seem more concerned about adding browser support for older versions of more popular browsers that are still in use (like Chrome, Firefox, etc.). 😉

    Keep coding (and happy coding, too)! 😁

  • Anna Leigh•5,135
    @brasspetals

    Hi, Marta!

    Sorry I missed this solution! Congrats on completing another one - and good job on this one too! 😄

    It looks fine to me on 320px screens - so perhaps you have already made fixes since originally posting your solution. I had to make an extra media query for screens below 375px for mine.

    As for IE, I don’t think you need to worry about it generally. According to Can I Use, global usage for IE is barely above 1%. I see you’re already using an auto-prefixer, so you should be more than good.

    I think it’s great that you added in some loading and scroll animations for different sections. My only suggestion here, and this is totally a personal preference, is to have all the hero animations end at the same time or very near. Right now the heading takes a bit longer than the nav.

    I also suggest going in and taking another look at your gallery div in the creations section - from 768px to 783px the images get HUGE. Might want to adjust your media query so that your grid-template-columns gets applied a little earlier.

    Looking forward to your next solution - and happy coding!

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