Adding a white text box with headline and text in the box Debut Theme

[aprilyuen]

Hi, 

I would like to add a small white text box over the Image with Text overlay section of my website. I would like it to be on the left side of the banner image. Then I would like to write my headline and some copy on that box. How do I do that? Here is my current website Image with Text section. 

 

[KetanKumar]

@aprilyuen 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[aprilyuen]

Hi Ketan, 

Here is the url to my site. 

https://wcjor95w3g2xlsu5-53829173446.shopifypreview.com

The password to view it is tulipred9.

[LitCommerce]

Hi @aprilyuen,

Means you want to add 2 options, 1 display the content as it is (in the middle and full ), 1 display the content to the left like your description?

Because if you add a new box, it will overwrite the current content, or do you want to move the current content to the left as described.

Please explain more about it, I will help you to come up with the best solution.

[aprilyuen]

Hi LitCommerce, 

I would like to put all the text including the headline and the description  in the rectangular box I have drawn. I would like to draw a white box that is over the image and put all the text on the box. I want to get rid of the text that is currently laid out on the middle of the image and only have the text on the white box. Please let me know if that's not clear. 

[LitCommerce · Accepted solution]

Hi @aprilyuen,

Go to Assets > theme.css and paste this at the bottom of the file:

.hero__inner .page-width {
	width: 45%;
    background: #fff;
    padding: 30px;
    margin-left: 5%;
}
.hero .mega-title, .hero .mega-subtitle, .hero .mega-subtitle p {
	color: #000;
}
@media only screen and (max-width: 989px) {
	.hero__inner .page-width {
		width: 100%;
		margin-left: 0;
	}
}

Hope it helps!

[aprilyuen]

Thank you LitCommerce! This is perfect!!