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 / HTML, CSS / Mobile First.

@PaliTriesToDesign

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


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!

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

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

2

@PaliTriesToDesign

Posted

@brasspetals Hey Anna! I will try your suggestions. I really appreciate the feedback. Thanks a lot!

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