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

Clipboard landing page using flexbox

@Senatrius

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a deceptively challenging one. When I saw the designs, I figured this can't be that bad. And then when I started I found multiple wrappers for text, images going outside the container on different screen sizes and god knows what else. Will be definitely revisiting this project in the future once my layout skills improve.

Until then, any and all tips you might have to offer are highly appreciated :) Especially for making the image go outside it's container.

Community feedback

tspinjac 140

@tspinjac

Posted

@OP :D That 'this should be easy' gets me every time as well ^^

As for picture going off screen, I'm aware of these (HTML/CSS wise):

  1. Translate (as you did)
  2. Negative margins (as @Diarrah suggested)
  3. Absolute position (avoiding this for some mayor layouts)
2
Diarrah 3,418

@Diarrah

Posted

You did a good job, pretty spot on!

The way I did the picture going off screen was just to put a negative margin-left on the picture.

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