Hello, I’d like to put a white outlined box around the content on my homepage on the hero image around the txt. Please see attachment. How can I do this?
I made a few modifications to your project but don’t worry - I’ve got photos!
I apologize for the length of this reply, I just wanted to be thorough.
1. Modify the section in which you had the text box in: Section-Hero
- Change the display from Block to Flex
- Align Left and Justify Center
This will move the text down some, don’t worry - we’ll get to that.
2. Modify the div: Hero Text - Left
- Change this display from Block to Flex
- Direction Vertical, Align Center, Justify Center
- Adjust the Margins/Padding
Margin Left: 100px
Padding: 50px (All Around)
- Go to the Borders section and select Solid line and change the color to white.
3. Lastly, modify the Form div inside of the Hero Text - Left div.
- Align Text Center
And that is it.
Great walkthrough on this!
thanks for the walkthrough. When I did this the box now takes over the entire image and not just off to the side. How can I fix this? The button is also not centered
To center the button just click the form div and change the text alignment to center.
I’m not sure why your textbox is doing that, it must be a parent element causing that.
I’ll revisit your shared link once I get back to my computer.
Okay, so here’s what we got:
1. Your Section - Hero needs some modifications
You need to:
- Change the Direction from Horizontal to Vertical
- Change the Align type from Center to Left
- Change the Justify type from Left to Center.
2. I forgot to mention one thing in my previous post for the Hero Text - Left div.
You need to change the width of this div from 85% to Auto
ahh… thanks so much
No problem, if you have anymore questions please feel free to reach out.