Submitted over 4 years ago

Clipboard landing page using Flexbox - mobile first design

lukassiarny• 280

@lukassiarny

Preview site View code

This is a solution for...

Clipboard landing page

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello.

So I've tried another landing page. I wasn't sure how to make image of the computer go behind the screen. I came up with some solution using scale to do so, but I don't know if it's alright. Is there any other way to do it?

At first, I wanted to have one big container that would wrap all the content, but there was a problem to get that computer of it. So I decided to use containers separately in each section to have more control of their width. But I ended up with three types of containers instead of one, which I'm not sure if it's the cleanest solution. So is there a way how to it with only one type of container and get the image of the computer out of it somehow? Thanks in advance.

Community feedback

lukassiarny• 280

@lukassiarny

Posted over 4 years ago

Hello. Thanks for the feedback. Great work what you're doing here. Tutorials are good, but nothing beats practice. It helps a lot. Yes, this is what I wanted to achieve. Thanks for the suggestion. It works, but there's a little problem I can't figure out. Look at the screenshot please:

https://ctrlv.cz/NTMo

I used transalteX(-10%) to move image off the screen. But then I wanted to set width of my img to 110%, so it would be aligned to the center of the screen, but it's not working. Any ideas why? Thanks.

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Hey Lukas, nice work on this challenge! I'm not 100% sure what you mean about making the "image of the computer go behind the screen". Do you mean positioning off to the left? If so, using transform: translateX(); will do the trick.

Having multiple container sizes is absolutely fine. I'll often define .container, .narrow-container, and .wide-container classes with differing widths.

I hope this helps. Let me know if you have any other questions 👍

Please log in to post a comment

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