Streaming live at 10am (PST)

Issue with Divs, Flexbox and Positioning in General


#1

Hey guys,
So right up front, I’m a nube. The only reason I can tie my shoes is muscle memory. That said…

I’m trying to get my hero (text + large asset + background) to look and behave like:

My site
Read-Only: https://preview.webflow.com/preview/mybluecard?preview=0fdb0fae7d4300293fb3b00b93bb624f

Published: http://mybluecard.webflow.io/schools

I’m trying to set up a hero section with these properties:

  • background image is centered, full width and doesn’t move when browser is resized
  • hero content consists of two basic sections: text and a large pic

I can get the background to stick, but as soon as I start trying to add the two sections the background image starts scale with the browser.

Here is what I’ve tried.

  • I added two sections, each with width=50% and float left
  • In the lefthand section, I added two sections to it. One with width=500px, the other width=100%
  • In the righthand section, I added an image to it and set the height to 950.

I am very new to display setting=flex. Also, I’m not too clear on substituting divs to ‘recreate’ your native column element to get past the width constraints.

Ideally, my large pic would behave somewhat similar to the stripe example in terms of filling up right half of the page and slightly hanging off the page until ‘some specified min size’ before it slides under the text to the left of it.

Would you help a brother out, please! :slight_smile:

Thanks in advance,
Alfredo


#2

Hi @alfredo

Do we ever really ever stop being nubes? Always learning, so something is always new! :smiley: You’ve got a great eye for design by the looks of it, so you’re miles ahead of me!

Check out the flex box game, I say to everyone that it’s a worthy investment of your time and will help your design process undoubtedly.

Here’s a video (with sound) of the way I would try and layout your hero page. There may be better ways of course and you’ll need to do some tweaking to get it all looking right on the different breakpoints, but hopefully will set you on the right way.

You can also use VW on text elements to make them fully responsive. Instead of 14px, try 3VW in the text size field and see what happens when you resize your browser :smiley:

Let me know how you get on;

CloudApp


#3

haha! So true. We must keep learning!

Really appreciate your response. I can’t see it now but will take a look when I’m back at my desk and will touch base if I have any questions.

Thanks again Mark!!!

Best,

Alfredo


#4

Hey Mark,

I’m not sure that is exactly what I was going for. But I AM SUPER IMPRESSED BY YOUR VIDEO! Way cool man. Thank you for that!

When you have a moment, please take a look at the same links I previously sent you. I basically chopped the assets so only one is part of the background image. That way it starts to hide when the browser is made smaller. Ideally, the phone will stay full size until the text on the left hits some min width, then the background would change to remove the ipad and the two assets would go underneath the call to action button. Have to figure out how to do that and move the next paragraph down (i.e the one that starts Safety infrastructure for the modern…).

If you look at the stripe site and make the browser smaller, I think you’ll see what i’m talking about.

If you have any thoughts I’d love to hear them. :slight_smile:

Thanks again.