Impulse theme help - cant make text box transpert on mobile

Solved
boxingcentral
Tourist
37 0 11

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

0 Likes
dmwwebartisan
Shopify Partner
5844 1337 1714

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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
boxingcentral
Tourist
37 0 11

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

boxingcentral
Tourist
37 0 11

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

dmwwebartisan
Shopify Partner
5844 1337 1714

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
boxingcentral
Tourist
37 0 11

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
5844 1337 1714

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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes