Dear Customers! We're out of the office from the 6th of October to the 11th of October. We sincerely apologize for the inconvenience. For WordPress 5.5.* related issues, please visit this article

Okay
  Public Ticket #1670346
how to change the font size for slider
Open

Comments

  •  1
    funzool started the conversation

    hi,

    how to change the font size for the slider? tried customizer but didnt seem to work.

  •  363
    Filip replied

    Hi there!

    What exact slider do you have in mind? If it's:

    1. Fullscreen slider, then please use this custom CSS (to be added in Theme Options / Advanced / Custom CSS area):

    .home-inner.v2 .home-text-slider .home-texts .slide { font-size: 50px; }
    .home-inner.v2 .home-fixed-text { font-size: 18px; }
    

    The first line applies to the bigger text, the smaller one applies to the subtitle.

    2. If it's a Revolution or Layer slider, you will need to go to the Revolution Slider settings, edit that specific slider you use and change the typographic settings right there.

    Kind Regards,
    Veented Team

  •  1
    funzool replied

    Using the full screen slider. Ok got it. Thanks.

  •  363
    Filip replied

    You're welcome!

    Kind Regards,
    Veented Team

  •  1
    funzool replied

    How about on mobile? How do i enlarge the font size?

  •  363
    Filip replied

    Hi again,

    This CSS will work:

    @media screen and (max-width:760px) {
        .home-inner.v2 .home-text-slider .home-texts .slide { font-size: 50px; }
        .home-inner.v2 .home-fixed-text { font-size: 18px; }
    }
    

    Kind Regards,
    Veented Team

  •  1
    funzool replied

    Doesn't seem to work. Here's the link. www.neptuneavia.com

  •  363
    Filip replied

    Hi there,

    Oh, it looks like it's being overwritten by some other rules. Please try the following code:

    @media screen and (max-width:760px) {
        #page-content .home-inner.v2 .home-fixed-text {
            font-size: 18px;
            line-height: 1.3em;
        }
    }

    Kind Regards,
    Veented Team

  •  1
    funzool replied

    thanks it worked. however, another issue on ipad. tried the same fix but didnt work. what should i put?

  •  363
    Filip replied

    Hi there,

    Okay, so that code I just sent you includes the "760px" part and that means it's going to affect devices with a screen resolution lower than that. For iPad, please change it to "1024px".

    Kind Regards,
    Veented Team

  •  1
    funzool replied

    i want to have different font sizes as follows. seems like it didnt work on ipad for 1024 for the latter. what should i change?

    @media screen and (max-width:760px) {
        #page-content .home-inner.v2 .home-fixed-text {
            font-size: 22px;
            line-height: 1.3em;
        }
    } @media screen and (max-width:1024px) {
    .home-inner.v2 .home-fixed-text {
            font-size: 32px;
            line-height: 2.3em;
        }
    }
  •  363
    Filip replied

    Hi there!

    Well, you use a stronger selector (with an ID #) for smaller devices (max-width:760px;). Please use the same selector for both, like:

    @media screen and (max-width:760px) {
        #page-content .home-inner.v2 .home-fixed-text {
            font-size: 22px;
            line-height: 1.3em;
        }
    }
    @media screen and (max-width:1024px) {
        #page-content .home-inner.v2 .home-fixed-text {
            font-size: 32px;
            line-height: 2.3em;
        }
    }
    

    Kind Regards,
    Veented Team

  • Mariana Vargas replied

    You can try adjusting the font size with custom CSS like this:

    .your-slider-class {     font-size: 24px;  }
    

    If it’s not working, check if your theme or plugin has specific settings overriding it. Also, using Inspect Element in your browser can help identify the exact class you need to target.

    I’ve had to tweak font sizes before, especially when working on layout adjustments and spacing calculations. If you often deal with such modifications, you might find this tool useful: https://aliciacalculadora.net/calculadora-de-alicia-app/

  • Jemi Anderson replied

    To change the font size for a slider, you can modify the CSS of your website. Look for the slider text class in your CSS file, and then adjust the font-size property to your desired size. If you're using a slider plugin, many of them offer options in their settings to customize the font size directly. For an even smoother experience, you can try using calculadoradealiciapro for all your calculation needs—it makes a great addition to any website!

  • Jemi Anderson replied

    To change the font size for a slider, you generally need to adjust the CSS properties. Here’s a basic example to modify the font size:

    .slider-text {
        font-size: 20px; /* Adjust the size as needed */
    }

    You can target specific elements within the slider (like the title or description) by using the right class or ID selectors. Depending on the platform or tool you're using to create the slider, there might also be built-in options to change the font size. This kind of customization is crucial for ensuring that the slider text is clear and readable across various devices. Much like how consultancy companies in Saudi Arabia help businesses adapt their digital presence, tweaking small details like font size can improve user experience and engagement. Customizing such elements can make a big difference in the overall design and functionality of your website or app!

  • tylerluke replied

    It will depend upon which theme you're using for your site. we are using plumbing theme for our pro Action plumbing site. and it is easy to change the font size. just go the customization, typography and there you can change the fon't size.