Hello all!
So I’m pretty new to the Web Design and Webflow world and am currently working on creating a website for my golf business that I’m just getting started! I have a design ? for y’all.
I’m trying to recreate the screenshot from below (which I created in Figma) and implement that in Webflow… I want this to be the general layout on desktop and tablet-sized devices…
Do I need to use a flex box and use CSS position to move the image around?? I’m struggling to recreate the design and make it responsive and look good on all desktop sizes… Many thanks!
-J.D.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
1 Like
Hi J.D.! Welcome to the forum! You’re definitely on the right track already using flex and positioning. What I would personally do here, probably, is have a structure like this:
[div container full body width, position mode relative]
…[circle object, position mode absolute]
…[image of person, position mode absolute]
…[div container, maybe 50% width, position mode absolute]
________hero text, buttons, etc
This is of course just one way to do it, and with the absolute positioning you can set objects to hug left/right/middle and granularly control positioning. You can also dial down each breakpoint to make sure the layout is responsive to your preference. Hope this helps! Once you’ve got it laid out, if you have any issues, feel free to reply and leave a read-only link to your project so we can take a look.
1 Like
Awesome. Thank you for the speedy reply and input!
I like the layout you provided. I will give that a try and if I run into any issues I’ll be sure to leave another reply… Super excited to get going on my Webflow journey!
Have a great day! 
1 Like
Another ? What is the best approach to “hiding” part of the ellipse/circle so that it isn’t viewable? When I set the circle to position: absolute and try to move part of the circle “off of the page” to recreate the look of my img. in Figma it just increases the Webflow editor’s width.
You’d probably want to play around with the overflow: hidden property so that when the circle extends outside of its container, it isn’t visible.
1 Like
Got it… Thanks! So I was trying to set overflow:hidden on the actual div block where I created the circle as opposed to setting it on the div container that housed all of the elements itself. That solved my issue.
1 Like
So I have another ? for you… I have the “design” that I want (I haven’t taken the image I want yet but will add later) but am struggling to get the layout with different viewport heights… Basically I want the div w/ the circle object and hero text to take up the remainder of the viewport height (after the navbar.)
Here’s read-only link: https://preview.webflow.com/preview/jd-heatherly-golf?utm_medium=preview_link&utm_source=designer&utm_content=jd-heatherly-golf&preview=c153f62752682fb417be92bb994f9b9f&workflow=preview
