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.
Do we ever really ever stop being nubes? Always learning, so something is always new! 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
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.
You’ve got a great eye for design by the looks of it, so you’re miles ahead of me!