Streaming live at 10am (PST)

Adding A Box to my home page

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.


1 Like

Great walkthrough on this!

1 Like

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.