Slider text size

Hi,

Is there a way to make the slider text larger and possibly bold?

The text seems to disappear in the background pictures we use and we have changed several time and it just seems if the text was a bit larger it wouldn’t disappear.

Thank You.

Joe

Dear Joe,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.text-slider .maintitle{
  font-size: 60px;  
}

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

To control the size on certain mobile device’s screen width, wrap the code with media query. It would look like:


@media only screen and (max-width:640px){
  .text-slider .maintitle{
    font-size: 60px;  
  }

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

Please read this article.

I hope this reply helps.

Regards,
Kharis

1 Like

Whenever i switch to mobile view. it does not change the size of the text slider, please help me.

Where will i put the code?

Heres the current code in Simple CSS
.text-slider h2.maintitle {
color: #006caa;
font-size: 45px;
font-style: regular;
}

.text-slider p.subtitle{
color: #ffffff;
font-size: 28px;
font-style: regular;
}

@media only screen and (max-width:640px){
.text-slider .maintitle{
font-size: 60px;
}

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

I tried to validate your CSS code with this tool and I found and error which might prevent the web browser to read the next CSS rules.

Cloudup

You don’t have to include this declaration.


font-style: regular;

You might need to adjust the screen width in this line:


@media only screen and (max-width:640px){

with the maximum width of the mobile screen. You might need to add !important argument. So it’ll look like this:


@media only screen and (max-width:640px){
  .text-slider .maintitle{
  font-size: 60px !important;
  }

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

Make sure you’ve defined the correct font size.

Regards,
Kharis

1 Like