Skip to content
Submitted over 2 years ago

Mobile-first Loopstudio landing page

Pieter•80
@Pubstar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Loopstudios landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Getting the "See All" button above the images on desktop and below the images on mobile took me more time than I'd like to admit but we got it!

I do have a question about adding a border on an element on hover, this seems to move around the other elements a tad bit, atleast when using flexbox, is there any way to avoid this behaviour? For example if you hover over the socials-icons in the footer, every other icon moves a few pixels.

Community feedback

  • Oladapo Jesufemi Paul•1,060
    @jesufemiganPosted over 2 years ago

    Good work! A better way to position to "See All" button will be to use the "display: grid". To avoid the issue of other icons moving a few pixels down, I think this is because you did not add "box-sizing: border-box;" as a global style either in the body tag or create an "all" tag using *.

    e.g * {box-sizing: border-box;}

    1
    Pieter•80
    @PubstarPosted over 2 years ago

    @ElpidaHope Thank you very much for the feedback! In this case the box sizing did not help, however I did read into it and had no idea this even existed! Seems really helpful thank you!

    0
    Oladapo Jesufemi Paul•1,060
    @jesufemiganPosted over 2 years ago

    @Pubstar You're welcome. That means using border bottom will always increase the height of one of the images when you hover which will affect all other images in the container. A better approach will be to use the "::after" which will not affect the height of the image since it will be positioned absolutely. You can as well make some research. I hope it helps

    Marked as helpful
    1

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