Canvas Support

Flex Parallax Image Doesn't Show on Mobile

6 replies · opened Nov 19, 2021

JJasonJSWNov 19, 2021

Hi guys,

I have a small issue, I added a d-flex parallax image on my website, it works great on browsers but will not show up on mobile. Seems like a simple fix, could you please help make this image work on mobile?

If it's an issue of the parallax effect not working on mobile, I would just like the option of having the image showing up as a background anyway

<div class="d-flex justify-content-center position-relative">
<div class="parallax min-vh-40" style="background-image: url('images/crypto.jpg'); background-size: cover; background-position: center center;" data-bottom-top="width: 40vw" data-center-top="width: 100vw;">
</div>
<div class="shape-divider" data-shape="wave" data-position="bottom"></div>
</div>

Thank you,
Jason

SSemicolon WebSTAFFNov 20, 2021

Hello,

We have checked out the Codes and it appears to be fine. Can you simply add the following code inside the .parallax DIV and see if this fixes the issue:
[ch_pre]We Love Crypto Payments[/ch_pre]

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

JJasonJSWNov 20, 2021

UPDATE: Please see Update #3 below

Hi,

Thank you for your reply. This didn't seem to work. I tried adding in the code in the .parallax but still doesn't show up on mobile. Oh I see what you're trying to do, it may be because the text is missing that it doesn't show up the image on mobile?

Is there any other solutions I can try? Thank you

		&lt;div id="section-crypto" class="page-section"&gt;	
			&lt;div class="section mb-0 pt-3 pb-0" style="background-color: #F4F4F4; margin-top: 150px; overflow: visible;"&gt;
				&lt;div class="shape-divider" data-shape="wave" data-height="150" data-outside="true" data-flip-vertical="true" data-fill="#F4F4F4"&gt;&lt;/div&gt;
				&lt;div class="container"&gt;
					&lt;div class="row justify-content-center text-center mt-5"&gt;
						&lt;div class="col-lg-6"&gt;
							&lt;div&gt;
								&lt;h3 class="fw-bolder h1 mb-4"&gt;We Love &lt;span class="gradient-text gradient-horizon"&gt;Crypto&lt;/span&gt;.&lt;/h3&gt;
								&lt;p class="mb-5 lead text-black-50 fw-extralight"&gt;We are accepting most cryptocurrencies as payment for video production. Bitcoin (BTC), Ethereum (ETH), Solana (SOL), Cardano (ADA), XRP, DOT, ATOM, KDA, DOGE, SHIB, USDC / USDT, and much more including NFTs. &lt;br&gt;
								We are one of the first production companies to successfully service productions strictly on cryptocurrencies. 
								&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="d-flex justify-content-center position-relative"&gt;
					&lt;div class="parallax min-vh-40" style="background-image: url('images/crypto.jpg'); background-size: cover; background-position: center center;" data-bottom-top="width: 40vw" data-center-top="width: 100vw;"&gt;
					&lt;/div&gt;
					&lt;div class="shape-divider" data-shape="wave" data-position="bottom"&gt;&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;	
		&lt;/div&gt;
JJasonJSWNov 20, 2021

UPDATE: Please see Update #3 below

I don't want text so I tried adding d-none to the ``, but then the background image also disappears.

JJasonJSWNov 20, 2021

UPDATE: Please see Update #3 below

UPDDATE 2: Sorry for the multiple posts, just trying to figure this out faster. Ok I figured out what's happening, if I copy/paste exactly the same text on your demo, the text is longer and it gives me the full-width on mobile.

Does this information help?

Now that I have a full-width image, I just want to remove the text, for now I will try d-none, on a bunch of codes

JJasonJSWNov 20, 2021

UPDATE 3: Okay I figured it out, but I don't like the solution from a coding perspective. You basically HAVE to have some kind of text for this image to stay on mobile. My solution was to add 24 empty spaces with &nbsp

<div class="col-auto text-center">
<ul class="display-4 fw-bolder text-white d-inline-block mx-4 h-op-08 op-ts">
<ul class="display-4 fw-bolder text-white d-inline-block mx-4 h-op-08 op-ts">
</div>

It does exactly what I want it to do, but I'm hoping you have a better solution that's friendlier from a coding perspective.

d-none does not work, it seems this code requires text to be physically there to show mobile image

Looking forward to your response

Entire section code:

<div class="d-flex justify-content-center position-relative">
<div class="parallax min-vh-40" style="background-image: url('images/crypto.jpg'); background-size: cover; background-position: center center;" data-bottom-top="width: 40vw" data-center-top="width: 100vw;">
<div class="row align-items-center justify-content-center h-100">
<div class="col-auto text-center">
<ul class="display-4 fw-bolder text-white d-inline-block mx-4 h-op-08 op-ts">
<ul class="display-4 fw-bolder text-white d-inline-block mx-4 h-op-08 op-ts">
</div>
</div>
</div>
<div class="shape-divider" data-shape="wave" data-position="bottom"></div>
</div>

SSemicolon WebSTAFFNov 22, 2021

Hello,

Thanks for your Kind Patience!

We have run more tests on this. So the issue was that since the Parallax Functionality is currently not supported on Mobile Devices, the Parallax Container width was 0px. Here is the Final Code to fix this issue:

HTML:
[ch_pre]


[/ch_pre]

CSS:
[ch_pre type="css"]@media (max-width: 991.98px) {
.parallax {
width: 100%;
}
}[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard