Impulse theme help - cant make text box transpert on mobile

Solved
boxingcentral
Explorer
80 0 20

I am having trouble with this black background where it's got a text. if I change the background colour then it also changes but that affects the whole website. I just want to make that textbox transparent without the black outline/box

 

on desktop its transparent on mobile it isnt

 

www.imjustboxing.com passcode: 0000

 

Im Just Boxing ~ Customize Impulse ~ Shopify - Google Chrome (gyazo.com) - desktop

Im Just Boxing ~ Customize Impulse ~ Shopify - Google Chrome - Gyazo - mobile

Accepted Solutions (2)
dmwwebartisan
Shopify Partner
11515 2438 3529

This is an accepted solution.

@boxingcentral 

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

@media only screen and (max-width: 768px){
.background-media-text__aligner {margin: -230px 6px 6px !important;}
#shopify-section-16200822691b87ae44 .background-media-text__inner { background-color: transparent !important;}
}

Hope this helps.

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

View solution in original post

dmwwebartisan
Shopify Partner
11515 2438 3529

This is an accepted solution.

@boxingcentral 

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

@media only screen and (max-width: 768px){
.background-media-text__container, .background-media-text__video {height: 340px;}
[data-aos=background-media-text__animation] .background-media-text__image, [data-aos=background-media-text__animation] .background-media-text__image svg, [data-aos=background-media-text__animation] .background-media-text__video {
opacity: 0;
height: 340px;
}
}

 

Hope this works.

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

View solution in original post

Replies 6 (6)
dmwwebartisan
Shopify Partner
11515 2438 3529

This is an accepted solution.

@boxingcentral 

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

@media only screen and (max-width: 768px){
.background-media-text__aligner {margin: -230px 6px 6px !important;}
#shopify-section-16200822691b87ae44 .background-media-text__inner { background-color: transparent !important;}
}

Hope this helps.

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
boxingcentral
Explorer
80 0 20

you my friend are a legend, thank you to everyone else aswell!

boxingcentral
Explorer
80 0 20

for mobile, it cropped the image. is there a way to make the image larger for mobile perspective? @dmwwebartisan 

dmwwebartisan
Shopify Partner
11515 2438 3529

@boxingcentral 

Please provide a screenshot of which image you are talking about.

 

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
boxingcentral
Explorer
80 0 20

CF3A6C33-23FD-4049-9B5F-ED950E9C4939.png

 the part where it says “boxing glove”

 

the image on mobile is cropped before it was large image now its not

dmwwebartisan
Shopify Partner
11515 2438 3529

This is an accepted solution.

@boxingcentral 

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

@media only screen and (max-width: 768px){
.background-media-text__container, .background-media-text__video {height: 340px;}
[data-aos=background-media-text__animation] .background-media-text__image, [data-aos=background-media-text__animation] .background-media-text__image svg, [data-aos=background-media-text__animation] .background-media-text__video {
opacity: 0;
height: 340px;
}
}

 

Hope this works.

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