Slider App - change font and mobile size

[Astrid]

• Issue description:
  Have used this slider on our website (currently in development) - I need to make it mobile friendly, font smaller on media (mobile) as well as change the height on mobile.
  Plus we want to use 2 different fonts, is that possible, have tried putting in code but not sure if I have done it correctly. Font is Lato for most but if we could use another one, that is loaded on the website, how do I reference that in style. (use Builderall - website builder)
  In both AuzLand and AuzLearn sliders.
  [
• Link to the page with the widget in question:]
  (AuzLand Property Development Group | AuzLand Property Development Group)

[Max]

Hi @Astrid

Sure thing, I’ll be happy to help!

Here is the code for changing the height on mobile:

@media (max-width: 500px) {
    .global-styles, .eapp-slider-slider-slider {
        height: 60vh!important;
    }
}

This code will help you to reduce the font on mobile:

@media (max-width: 500px) {
.eapp-slider-title-component {
  font-size: 12px;
}

.eapp-slider-text-component {
  font-size: 12px;
}
}

Please check it and let me know how it works

As for the fonts, if I understood you correctly, you’d like to have 1 font for Auzland widget and another one for Auzlearn.

Could you please specify what font you’d like to apply to a certain widget?

However, if I misunderstood you, please describe your use case in more detail.

[Astrid]

For now, if we can just use Lato font for all, but if we want the title to be slightly bigger (will be same for both, so it is branded.

[Astrid]

How do we change the height for mobile to be smaller, will that work by changing the width.

[Astrid]

Sorry, how do I make say Title to be Font used on website like Heading 2

[Astrid]

Font in the logo is Audiowide

[Max]

Hi @Astrid

If you want to reduce the height of the widget on mobile, you need to change the height parameter in the CSS code from my previous message:

If you want to change the size of the title font, use the first part of the code from my previous message:

To change the title font to Audiowide, try to use this code:

.eapp-slider-title-component {
  font-family: audiowideregular;
}

Please check it and let me know if it helped

[Astrid]

Having play around it.
It doesn’t seem to apply what code I put in elfsight CSS

[Astrid]

Never Mind, I got it working - had to put - in between audiowide-regular to get it to work
thank you for your help

[Astrid]

just having issues with the fonts not changing on the mobile, tried copying the font into the media area and it doesn’t work

[Max]

Hi @Astrid

Could you please install the widget to the test page, so that we could check things?

[Astrid]

Hey there
Apologies didn’t see your reply.

here is the 2 banners (have on 2 different page) on one page for you.

https://auzland.au/testing

So it appears the fonts are only showing on my Mac Computer in Chrome, they don’t work at on on a PC / Windows or even Safari on my computer.

Maybe need extra settings.
If you can help that would be appreciated.

In Elfsight, there are 2 sliders (AuzLearn - Green version & AuzLand - orange version)

Cheers Astrid

[Max]

Hi @Astrid

Previously, you wanted to change the title font to Audiowide. However, I see that now you are trying to add different fonts for different widget elements:

Could you please specify where the issue occurs? What font isn’t displayed?

I’ll be happy to investigate in for you

[Astrid]

Here is a test page

AuzLand Property Development Group | AuzLand Property Development Group Banners

There are 2 used, top panel is on 4 pages
AuzLearn has it’s own top panel
However I have put both on this page.
They requested to use Brushabs-Semibold and Lato for different elements.

However it works fine on my Mac in Chrome but it is not working on any other device, mobile, windows computer or even on my safari brouwser.
We want it to match the rest of the website

[Max]

Hi @Astrid!

I got you. I’ve forwarded your request t our devs. I’ll get back to you once I receive any updates

[Max]

Our devs have checked your website and found several reasons for the font issue.

Firstly, you’ve added wrong font-family names in the Custom CSS field. BrushABS Semibold is connected on his site as brushabssemibold, not Brushabs-Semibold, but Lato with font size: 400 is connected just like Lato, not like lato-regular. So, we’ve fixed font styles.

However, the main reason for the issue is that your widgets are installed in iframes. To display correct fonts, you need to reinstall your widgets without iframes.

Please let me know if this explains things or if you have any other questions.

[Astrid]

The platform Builderall that we use only has the ability to use an iframe.
Is there a way to add the styles in the script code.

[Max]

@Astrid In this case you can try to add fonts into iframe.

To do this, you’ll need absolute links, because relative links won’t work.

It means that you’ll have to upload these fonts to some server in order to could get these links. You already have such a link for BrushABC Semibold, but not for Lato:

If you create an absolute link for Lato, please try to add this code to iframes with widgets:

<style>
@font-face {
  font-family: 'brushabssemibold';
  src: url('https://cheetah-templates.builderall.com/storage/user_files/921325/fonts/brushabssemibold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  src: url("https://HREF-FOR-LATO-FONT") format('woff2');
}
</style>

Please change “https://HREF-FOR-LATO-FONT” with Lato absolute link.

Also, I have to mention that this workaround may affect loading speed of your page because most likely these fonts will be loaded into iframes separately.