Skip to content
Submitted over 3 years ago

Mobile-First Blogr Landing Page using Flexbox and Grid with GSAP

Ron Paolo Toyhacao•165
@rontoyhacao
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blogr landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello, it's been awhile. I have to say this challenge really had me depressed because it's my first landing page lol. The layout is very tricky for me and it took me time to pull it off. I hope someone here could check out my code because it's kind of a mess and I'm not really sure if it's okay. It's my first time doing the mobile-first approach. Also I tried to use BEM in doing css. One thing that bothers me is that when the page opens for the first time on mobile, the second image isn't centered. It only gets fixed on reload. Do you guys know why? I'm hoping for any honest feedback.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, upon looking at your stylings, the transform: translate is the causing it, but not it itself, but when you scroll to the element and fires something, is that what GSAP does? Like an event listener? . Also looking at it, there doesn't seem to add any stylings but a transform is appearing on it. I can't really much explain how it does since I don't see any codes adding a style to it. But if you were to use something that fires when you're element is seen, I personally use IntersectionObserver api for that

    0
    Ron Paolo Toyhacao•165
    @rontoyhacaoPosted over 3 years ago

    @pikamart Hi, the transform property is because of GSAP, I think it's GSAP that's causing it to not be centered at its first load. It's my first time using GSAP that is why I have no idea about it. I was just curious on using it. But anyhow thank you for the response I appreciate it. :))

    0
    Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    @rontoyhacao Oh I see, well goodluck to using GSAP for other challenges^^

    0

Please log in to post a comment

Log in with GitHub

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