reduce background size on image with text overlay | Broadcast theme

Solved
JonX
Explorer
69 6 30

Hello

I wish to reduce the size of the white background on the section below on mobile.

It covers the entire image which defeat the purpose.

My URL : www.ambigoose.com

Thank you

Jon

IMG_A0445D30A0EF-1.jpeg

 

 

 

 

Natztech
Shopify Partner
1890 492 1170

This is an accepted solution.

hello @JonX 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 @media only screen and (max-width: 789px){
#shopify-section-1627311780a380ce52 .hero__content.js-overflow-content{
	    width: 60% !important;
	    padding: 12px !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
dmwwebartisan
Shopify Partner
8489 1994 2679

This is an accepted solution.

@JonX 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 789px){
#shopify-section-1627311780a380ce52 .hero__content.js-overflow-content{
	    width: 60% !important;
	    padding: 12px !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
JonX
Explorer
69 6 30

Thank you So Much @Natztech 

0 Likes
JonX
Explorer
69 6 30

Hi @dmwwebartisan 

I would like to do the same thing on this slide show below but the same code does not work.

Thank you so much for your help

Jon

URL : https://www.ambigoose.com/collections/all

IMG_1EE729ED6881-1.jpeg

Natztech
Shopify Partner
1890 492 1170

hello @JonX  can you please share this page URL i can not see section which is share screenshot 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
dmwwebartisan
Shopify Partner
8489 1994 2679

@JonX 

Please add this code your css file 

@media only screen and (max-width: 789px){
#shopify-section-index-slideshow1 .hero__content.js-overflow-content{
	    width: 60% !important;
	    padding: 12px !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
JonX
Explorer
69 6 30

Hello @Natztech ,

Here is the url

The slideshow :

https://www.ambigoose.com/collections/all

 

0 Likes
JonX
Explorer
69 6 30

@dmwwebartisan unfortunately that does not work on the slideshow

0 Likes
dmwwebartisan
Shopify Partner
8489 1994 2679

@JonX 

Please try this css code 

 

@media only screen and (max-width: 789px){
 .template-collection .hero__content{ width: 60% !important; padding: 12px !important;}
}

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes