custom css not working when applied to mobile only

Hi,

The custom CSS button exists only in the Pro version of MetaSlider and this forum is for the free version of MetaSldier.

So, please send us an email through the contact form here: https://www.metaslider.com/contact/

Hi,

I am not sure what your are referring to, and what button or slider. If I have only your plugin “editor plus” activated, and the standard Theme twenty twenty one, your plugin is offering the option to add custom css (via selector, it is located below the other block settings like Typography or margin etc) to the standard blocks, e.g. the standard heading block.

Hi @vallered,

I’m sorry for this incovenience.

I did the follolwing:

– Added a heading block
– In Extras, I set the display to none for desktop and tablet, and set it to inline for moile.
– I added the following style in the Extra CSS field

selector { 
 font-family: fantasy;
}

The heading block has been hidden in the desktop and tablet and the font has been applied on mobile.

If the steps that I did are correct, then there should be an issue with the font you use or the way you registered it.

Cna you please share with me how did you add the font to your website?

Hi,

the issue occurs when I duplicate a heading element with a added font style (like you did), putting the duplicated block to mobile only (like you did), and the first block to desktop and tablet only (reason why I did that was to add line break to the heading for mobile). In that case the mobile block looses it’s font family set in the extra css field when displaying on mobile (the block I duplicated from is displaying the css font family correctly on desktop where it is displayed.

Font is added locally (it is a Blocksy Theme pro feature), but the issue is also there if I do it without local fonts.

Font family added is: big shoulders inline display

Hi,

I’m still unable to reproduce the issue on my local installation.

I’ve recorded a video for you showing what I did: https://drive.google.com/file/d/1tB46nTbqSJtRaVnLkXHhjTgJ2zJ241JW/view?usp=sharing

Please let me know what I miss.

It only occurs on a real mobile, not on desktop emulation. And only if you follow the following steps one to one:
1. Create a heading (lets call it #1) and add a custom font-family thru the extra css field
2. Duplicate heading #1 (lets call it #2)
3. set heading #1 thru extras to display “none” on mobile (the others entries for desktop and tablet remain “select” in the display field)
4. set heading #2 thru extras to display “none” for desktop and tablet, and “inline” for mobile
5. view the heading #2 on mobile (does not show the font-family set in the extra css field, which has been automatically copied from heading #1)

The issue disappears, when I do the following:
1. delete the font-family settings form the extra css field of heading #2
2. Save the page
3. edit the heading #2 again and put back the font-family settings to the extra css field
4. Save the page

The only issue remaining is a different one: Displaying on desktop (where it only shows heading #1) still considers some padding from heading #2, despite it is not displayed (I have some additional space below heading #2 now).

Correction: change display settings of heading #1 to “inline” for desktop and tablets makes the extra space disappear, so the spacing issue mentioned is no issue!

• This reply was modified 3 years, 7 months ago by vallered.
• This reply was modified 3 years, 7 months ago by vallered.

Hi,

Thank you very much for the detailed steps. I’m able to reproduce the issue and I’ve reported it to the development team.

Please keep watching this ticket and I will notify you once I get any updates.