Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first Loopstudio landing page

Pieter 80

@Pubstar

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@jesufemigan

Posted

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

@Pubstar

Posted

@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

@jesufemigan

Posted

@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
Discord logo

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