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

Solved

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

aprilyuen
Excursionist
30 1 8

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. 

Screen Shot 2022-03-23 at 3.54.04 PM.png

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 745

This is an 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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36940 3642 12003

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
aprilyuen
Excursionist
30 1 8

Hi Ketan, 

 

Here is the url to my site. 

https://wcjor95w3g2xlsu5-53829173446.shopifypreview.com

The password to view it is tulipred9.

LitCommerce
Astronaut
2860 684 745

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
aprilyuen
Excursionist
30 1 8

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
Astronaut
2860 684 745

This is an 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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
aprilyuen
Excursionist
30 1 8

Thank you LitCommerce! This is perfect!!