Create this Layout
I am struggline to create this layout from a figma file. can anyone help out please?
30 Replies
What are you struggling with?
I don't know how to position the image properly as it is in the design
how is it right now?
this is it in development
it seems pretty much the same, the onlydifference is that the green part in the design is wider
it's mpt
there are onlythree people showing
the lady showing in dev is postioned to the right and somehow cut off
without seeing your code, it's going to be hard to answer. Check out #how-to-ask-good-questions and put this somewhere so people can see it in their own browsers
okay I will do thay
Make the container display flex
i did that
Try making the flex-basis for the container on the left about 60%
this is the figma file I am trying to work on. I am unable to share my code because I need to get a premium account on online editors
you can use codepen and a placeholder image, or upload the image to imgur
ok
It’s because of the sizing of the green content. As I believe was already mentioned, you’d have to use a flex-basis to adjust that. If it’s still not quite right, you can tweak the image with background-position or object-position depending on if it’s a background image or an image element
@Jochem I have uploaded the image to imgur and transferred the code to codepen.Above is the codepen link
@Oladipo Sam-Charles @lko @snxxwyy you can check those links I shared. thanks a lot.
CSS already giving me headache so I slept off
I just added this:
Well it looks like the left part is 807px wide, but in the website you can't say that the flex basis is 807px because it would suck, you have to find a way to make it responsive and still make it look good, I saw you used percentages, and i think that's a great solution
This would also be the reason the image is wider than necessary in the design, so that the left can be a relatively fixed width while the right part has room to fill a wider gap
making things pixel perfect should never be the goal because it's impossible
the only thing you should focus on, in this case, is getting close-ish, and I think the main thing you want to do there is to get the image to stick to the left of its boundary, and have it cut off on the right rather than both sides
like, if I take your codepen and set my browser's width to something less than full screen, it looks like this:
at full screen:
so it looks like it's working just fine?
No the image was wider because he didnt set a max-width: 100% so it was overflowing, but yeah it would still be wider
this is breaking my head right now. I feel like giviing up😴
basically, in web development, you never make a site that will only ever be displayed on a 1920x1080 PC in Chrome at full screen. People might have a side bar open, or an older monitor, or be using their phone, or hate full screen layouts, or be using Edge which has a little toolbar on the right by default I think? Or be on a 1300 wide laptop, or a weird tablet, or the PS5 browser, or an ultrawide monitor or a fucking Samsung Smart Fridge. You design your stuff to look close to the target design, but getting it exactly right is impossible and pointless, because the second someone else looks at it, it'll be a little different.
The most important thing is to make a site so that it looks decent on a wide range of devices and resolutions, and that means making sure that your design shrinks and grows along with the viewport.
Your example in codepen does just that. It looks alright squished a little, and a lot more like the design, but then it still looks okay when I go full screen in my browser. The question of "how do I get this image to cut off exactly here" is answerable for sure: Just set a width on the right column of your design. But it's almost always the wrong question
you forgot to mention that people also use different dpi settings, which can/will affect
rem and em and all font-related units
and that can also change the shape and size of elements, which can cause layout breaking situations
for example, i use 125% font size on my work laptop, because 150% is too big and 100% is too small for a 15.6" 1080p display
in fact, not even pixels are the same everywhere
there's even non-square pixels
oh, and on a crt (yes, people use it for the stupid high hz, no latency and nostalgy) you don't even have pixels
and the viewport size of a mobile browser is a lie
pixel perfect is a shiny myth made by clueless designers
just get it looking kinda like you want and be happy it doesn't break if there's a scrollbar😭 😭 😭 😭 my head hurts right now
donnt do pixel perfect: that's it
i should say "don't try", but you do you