3-Column Hero Page Design Help (With XD Images For Reference)

Hi everyone,

Working on a website I designed in Adobe XD. I really like the layout I have for the header, with the copy container on the left, product image in the middle and another product viewer type of element on the right. See attached photo for reference. Is there anyone that could help me out to make this as beautiful as possible on the desktop breakpoints? I’m going to hide the element on the right with the products when it breaks into tablet mode, so I won’t have to worry about that. The problem is the desktop breakpoints. My product image keeps scaling down, is there anyway I can balance these elements out for desktop? You can take a look at the link and play with it to see what I mean.

LINK:
https://preview.webflow.com/preview/tubmarket?utm_medium=preview_link&utm_source=designer&utm_content=tubmarket&preview=3b5af5d06dad2a84889478205c98bbad&mode=preview

Hey @Chutchy,

Is this what you were after?

1 Like

Thank you so much for the video @knk

I didn’t realize that my site would update while I was working on it in the background - I probably should of noticed that. I was having trouble with the side product tab (on the right-hand side, with the two product listing stacked) in the image I posted. I’ve since removed it and just when with an easier layout, with just the copy and tub image.

Nevertheless, your video helped me with this new layout, as I was having trouble with that too! Lol :slight_smile:
Thanks again

1 Like

You’re welcome :sunglasses: