Slider text font size for iPad version

Hello,

Can you please let me know the code to change the font size of the slider text for iPad version?

The font sizes for PC and iPhone versions are fine (thanks to your previous advice). I’ve just noticed that the font size for iPad is still too big.

Kind regards,

Hello, can you please provide a link to your website in order to let me check it?

You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support

Hello,

Here is the link to my website:

http://ur2.link/LWTH

Kind regards,

Hello,

Try to replace this additional CSS code that you have now:

@media (min-width: 768px) {
    .text-slider .maintitle {
        font-size: 48px;
    }
}

…with this:

@media (min-width: 768px) and (max-width: 1199px) {
    .text-slider .maintitle {
        font-size: 40px;
    }
}

@media (min-width: 1200px) {
    .text-slider .maintitle {
        font-size: 48px;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

It worked!

I have an additional question.
Can I change font sizes by changing numbers before “px”?

For example, if I changed the number before px from 40 to 30 as shown below, does it make the font size smaller?

I thought so and tried it, but it did not work. There appeared a cross mark in red, indicating, I guess , that I did something wrong. FYI, I am using a plug-in called Simple Custom CSS.

@media (min-width: 768px) and (max-width: 1199px) {
    .text-slider .maintitle {
        font-size: 30px;
    }
}

Kind regards,

Can I change font sizes by changing numbers before “px”?
For example, if I changed the number before px from 40 to 30 as shown below, does it make the font size smaller?

Yes, you can change it. And yes, it should make the font size smaller.

I thought so and tried it, but it did not work. There appeared a cross mark in red, indicating, I guess, that I did something wrong.

It looks like you did not apply your changes, so I can’t check what’s wrong.

FYI, I am using a plug-in called Simple Custom CSS.

We were recommending this plugin in past, until WordPress got its Additional CSS section. Now we recommend to add CSS code into the Additional CSS section since it’s a WordPress feature and it means one less plugin.

Kind Regards, Roman.
aThemes Support

Hi,

I copied the CSS to the Additional CSS section.
Now I can change the numbers, but I do not think the CSS code worked.
I changed it to 5 px for both but it did not make any difference.
Could you check it?

http://urx.red/UJBZ

Also, could it be the case when a CSS code works in the plug-in “Simple Custom CSS” while the same CSS code does not work in the Additional CSS section?

Kind regards,

Hello,

You have this CSS code that is missing the closing curly brace:

    .footer-widgets .widget-title {
      font-size: 16px;

…so please try to add the missing curly brace and see if it helps:

.footer-widgets .widget-title {
    font-size: 16px;
}

Kind Regards, Roman.
aThemes Support

Hello,

Thank you for pinpointing the error in my code.

I corrected it, but it still does not work.

Do you have any idea why it did not work?

Regards,

Hello, it still looks like an issue in your additional CSS code.

Please try to move this code to the very top of the Additional CSS section:

@media (min-width: 768px) and (max-width: 1199px) {
    .text-slider .maintitle {
        font-size: 40px;
    }
}

@media (min-width: 1200px) {
    .text-slider .maintitle {
        font-size: 48px;
    }
}

Kind Regards, Roman.
aThemes Support

Hello,

I have moved the code to the very top of the Additional CSS section.
The same thing happened regardless of the position of the code, either at the middle or at the very top of the Additional CSS section.

  1. When I copied the code, it worked.
  2. Then I changed the numbers, it lost its effect.

Also, I noticed when I checked the codes with “CSS validation service”:

  1. The original code was validated fine, as expected.
  2. After font sizes were changed (both to 5 px), the code was not valid any longer.

I may have done something wrong.
Can you figure out what is wrong?

Regards,

Hello,

After font sizes were changed (both to 5 px), the code was not valid any longer.

What were the validation errors, can you please specify them?

When I apply your modified code to your website using the browser tools, it works, so the code itself is okay. You can try to leave only this code in Additional CSS, and temporarily remove the rest.

Kind Regards, Roman.
aThemes Support

Hello,

I am not quite sure what you mean by

but I have put the original code that you provided without any modification.

I assume there should be a better way to share with you the result of the code validator, but let me just copy it below. I hope it makes sense.

Regards,

W3C CSS Validator results for TextArea (CSS level 3 + SVG)

Sorry! We found the following errors (2)

URI : TextArea

3 .text-slider .maintitle Parse Error ?? ?? ?? ??font-size:5px
9 .text-slider .maintitle Parse Error ?? ?? ?? ??font-size:5px

↑ TOP

Valid CSS information

@media (min-width: 768px) and (max-width: 1199px) {}

@media (min-width: 1200px) {}

Hello,

Okay, the original code works, as far as I can see.

Can you try this code?

@media (min-width: 768px) and (max-width: 1199px) {
    .text-slider .maintitle {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    .text-slider .maintitle {
        font-size: 15px;
    }
}

Kind Regards, Roman.
aThemes Support

Hi,

I tried the code.
It works.

Is it that there is something wrong with the way I modify the codes?

Additionally, please let me know what the first 15px is for and what the second 15px is for. (For example, the first 15 px is for the laptop version and the second for the iPad version.)

Kind regards,

Hello,

Is it that there is something wrong with the way I modify the codes?

It’s possible, but I’m not sure what exactly went wrong in your case, unfortunately.

please let me know what the first 15px is for and what the second 15px is for

Okay, this part is active when the viewport width is between 768px and 1199px:

@media (min-width: 768px) and (max-width: 1199px) {
    .text-slider .maintitle {
        font-size: 15px;
    }
}

…and this part is active when the viewport width is 1200px and more:

@media (min-width: 1200px) {
    .text-slider .maintitle {
        font-size: 15px;
    }
}

You can read more about the CSS Media Queries here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Kind Regards, Roman.
aThemes Support

Hi,

Thanks for the explanation and additional info.

Can you give me additional codes to change the font size for not only main title but also sub-title of the slider?

Regards,

Hello,

Can you give me additional codes to change the font size for not only main title but also sub-title of the slider?

Sure, try to use this CSS code instead of the previous ones:

@media (min-width: 768px) and (max-width: 1199px) {
    .text-slider .maintitle {
        font-size: 40px;
    }

    .text-slider .subtitle {
        font-size: 30px;
    }
}

@media (min-width: 1200px) {
    .text-slider .maintitle {
        font-size: 48px;
    }

    .text-slider .subtitle {
        font-size: 38px;
    }
}

Kind Regards, Roman.
aThemes Support

1 Like