[Support request] Re: Banner Image for Mobile and Audio Play

[Dan King]

Hello,

Firstly thank you for your help so far!!

I have hopefully a quick question… this page:

login: dan_kings
password: 1.2.3

https://learnclub.staging.wpmudev.host/c4/

Can I use a separate background image for mobile – banner…

Can the icons under the teacher bio play short audio files? “Hello I’m … and I teach…” without seeing the audio controls?

blue icon buttons:

https://drive.google.com/file/d/148om3SqfIDgL8zcmAx-PoK7nCIuXXMDb/view?usp=sharing

Thanks

Dan

PS I LOVE the template you guys built! :-))

[Elvin]

Hi,

Can I use a separate background image for mobile – banner…

Not exactly sure which section of the page you’re pertaining to. Can you specify? Screenshots will do. Thank you. 🙂

If you’re pertaining to the background for the “We teach you learn” section, I’m not sure if that’s going to work especially the background image has its own fixed yellow background color.

Can the icons under the teacher bio play short audio files? “Hello I’m … and I teach…” without seeing the audio controls?

It’s definitely possible but you’ll need scripting for this to work. But unfortunately, site kind of site customization is out of our scope.

But to help you out and point you to a known working direction:

You’ll need to assign an eventlistener for the icons and play once the trigger is met.

Here’s a topic that achieves the same way. You just need to apply its principle to your site.
https://stackoverflow.com/posts/34255405/revisions

[Dan King]

Hey Elvin,

Firstly thanks for the pointer re: audio 😉

So we have the characters on the banner but on mobile they aren’t visible…

https://drive.google.com/file/d/1fxL0ntFKO4KTy-XI8PY1LFBuogcg-zdi/view?usp=sharing

https://drive.google.com/file/d/1n0kpV2GiKPfYdDBQYoCkmJZqGjwGGz_c/view?usp=sharing

Thanks again,

Dan 🙂

[David]

Hi there,

this will be a feature of GB Pro. In the meantime give the Container Block that has the background image a class of: mobile-background

Then add this CSS with your mobile image URL

@media(max-width: 768px) {
    .gb-container.mobile-background:before {
        background-image: url(full_url_to_your_mobile_image_here);
    }
}

[Dan King]

Brilliant thanks!

Just plugging in the membership bit today so will look at this next week 😉

Great new feature for GB Pro… you should suggest the CDN for videos too – that has worked so well for us!

Dan

[David]

You’re welcome

[Author]

Posts