Submitted about 3 years ago

Clipboard Landing Page / HTML, CSS / Mobile First.

itcss

Pablo Montoya Varela•300

@PaliTriesToDesign

A solution to the Clipboard landing page challenge

Preview Code

Solution retrospective

I couldn't get to position de computer image as it was shown in the desktop design. I'd really appreciate any suggestions for it and for best practices.

Thanks!

Code

Please log in to post a comment

Community feedback

Anna Leigh•5,135
@brasspetals
Posted about 3 years ago
Hi Pablo! 👋 Congrats on submitting another solution! 🎉

That image is tricky. There's a few different ways you could do it. Working with your existing code, you could try increasing the image width percentage. Then add a max-width, so it doesn't get too big on larger screens. For positioning, you could use transform: translateX() with a negative value in order to shift the image left. Something like the code below could work. Note: the vaules I've used are just for the sake of example and would need to be changed to match the design.
```
.computer-image {
width: 125%;
max-width: 1000px;
transform: translateX(-300px);
}
```
Marked as helpful

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