Solved

reduce background size on image with text overlay | Broadcast theme

JonX
Explorer
76 6 33

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

 

 

 

 

Accepted Solutions (3)

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}
}

 

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

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){
 .template-collection .hero__content{ width: 60% !important; padding: 12px !important;}
}

 

View solution in original post

Replies 11 (11)

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}
}

 

JonX
Explorer
76 6 33

Thank you So Much @Kinjaldavra 

dmwwebartisan
Shopify Partner
12280 2546 3694

@JonX 

If helpful then please Like and Accept Solution

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JonX
Explorer
76 6 33

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

Kinjaldavra
Shopify Partner
2302 570 1422

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

JonX
Explorer
76 6 33

Hello @Kinjaldavra ,

Here is the url

The slideshow :

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

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JonX
Explorer
76 6 33

@dmwwebartisan unfortunately that does not work on the slideshow

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Kinjaldavra
Shopify Partner
2302 570 1422

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){
 .template-collection .hero__content{ width: 60% !important; padding: 12px !important;}
}