[William CParticipant]

How can I control the font size in a Revolution Slider. Currently it is larger then the rest of the page on the desktop and much smaller on mobile.

Ideally, I want the desktop to match the rest of the page and mobile to be about 80%.

Thanks!

URL: http://www.urbanfitnessmethod.com
Wordpress Version 4.0.1
Theme Version 3.0.1
Revolution Slider Version 4.6.0

[ChristopherModerator]

Hi there,

You can use Responsive Text shortcode to add text layer,then you will be able to control font size.

Or try this CSS under Customize -> Custom -> CSS:

.tp-caption.testimonial_caption {
font-size: 14px !important;
}

Hope that helps.

[William CParticipant]

I wish all support forums were like this one.

I used the “Responsive Text” shortcode by placing a “Responsive Text” block above my “Revolution Slider” Block and then linked them with a class. It seems to work well.

[Nabeel AModerator]

Glad it worked.

Have a nice day 🙂

[William CParticipant]

This is not quite working. One the first slide, I attain the desired results but for some reason on mobile the text blows up large on the subsequent slides.

The site is: http://www.urbanfitnessmethod.com

Thanks

[Kosher KMember]

Hi William,

Thanks for writing in,

Maybe something like this would help,

Add a class to that layer (doesn’t require you to use responsive text). You can add the class under “Attributes (optional)” section at the bottom area. then use that class to style the layer,

e.g. assuming the class you added is my-custom-class, you can then add this CSS code below under Customizer > Custom > CSS

@media (min-width: 979px) {
    .my-custom-class {
        font-size: 14px !important;    
    }
}
@media (min-width: 979px) {
    .my-custom-class {
        font-size: 80% !important;    
    }
}

Hope this helps,

Have a great day

[194rocParticipant]

Sorry for jumping in,

but where should I assign the class “my-custom-class” at the text layer that need font size customization ?

My site: wwww.castello.it/pomellato
Revolution Slider 5.0.6
Wordpress 4.3
X theme 4.1.0
Thanks,

Roberto

[RadModerator]

Hi there,

You can assign it to the container where the texts are wrapped. Like columns or text element’s class.

Cheers!

[194rocParticipant]

Hello there,

sorry I do not get it…

The text is one of the three layers that are contained in a slide.

I thought I could operate on one single slide and custom the font appearance for that single slide inserting, the code given to William, in this area :

http://prntscr.com/8fufd8

Then Trying to define the class for that single layer, I went to the slider settings thinking that this was the correct area to define the class:

http://prntscr.com/8fugkc

Furthermore I noticed that I could access to another kind of “CSS” editor….

http://prntscr.com/8fui6r

As you may noticed I am a kind of confused….

Last but not the least, following straightly your instructions, I should have navigate to the page containing the slider, edited with cornerstone and there apply the class “my-custom-class”, where is already present a class, the “right” one.

This class was assigned, with the help of your support, in order to have displayed, on mobile view only, the revolution slider images, before the text column.

Is it possible, to assign more than one class ? Should I separate them with comma ?

Sorry again for the most likely, beginner questions, but this is precisely what I am…

Thanks a lot for the support !!

Roberto

[ThaiModerator]

Hi @194roc,

Would you mind providing us with your admin account so we can take a closer look?

Don’t forget to set your reply as private!

Many thanks.

[194rocParticipant]

This reply has been marked as private.

[194rocParticipant]

By the way,

going a little deeper, as plan “B”, I thought about hide completely, rather than customize it, the text of the layer.

The visibility of a layer could be hided according to this:

http://prntscr.com/8fuzdm

Therefore I try this on my setting:

http://prntscr.com/8fuzs5

Probably the best way should be using this:

http://prntscr.com/8fy363

Unfortunately it seems that is not working either way:

http://prntscr.com/8fv2gt

I am a kind of lost…

Thanks,

Roberto

[LelyModerator]

Hello Roberto,

Thank you for the screenshots.
You can still use above CSS suggestion but I have edited it to below because there is a typing error:

@media (min-width: 979px) {
    .my-custom-class {
        font-size: 14px !important;    
    }
}
@media (max-width: 979px) {
    .my-custom-class {
        font-size: 80% !important;    
    }
}

As you can see previous suggestion is both min-width: 979px. I’ve adjusted other media query to max-width:979px which will target mobile text. Please tr again.

Yes, you can put it in Rev slider custom CSS area.

Hope this helps.

[194rocParticipant]

It is not working…or better I am missing something that doesn’t allow to the custom CSS to work properly.

I believe that if you need you could modify the CSS of a single layer of a single slide and than you should add the given code in this area:

http://prntscr.com/8gjjui

I do not follow this method because I didn’t want to mess with the existing code and moreover wishing to apply the custom CSS to the all slides contained in the slider I insert the code in here:

http://prntscr.com/8gjmej

After that I move to the page containing the slider, edited with cornerstone and define, for that column the class.
As you can see I have to move the existing class (right), after the just inserted my-custom-class:

http://prntscr.com/8gjoji

There must be something wrong that I do not understand.

Could you please help me on that ?

Thank you very much,

Roberto

P.S.: See also post #387454

[Paul RModerator]

Hi Roberto,

You need to add your class on the text layer itself.

http://screencast.com/t/BmUmrFNAm

Hope that helps.

[Author]

Posts