Change title font size in Widget

Hi there, How do I change the title font size and color in the SiteOrigin Image Widget?

Ive put the following in my css style

h3.widget-title {
font-size: 20px;
}

thanks

Hello there,

That code seems to be correct. To change the color, use this one:


h3.widget-title{
  font-size: 20px;
  color: #fff000;
}

Regards,
Kharis

Hello,

Please try to use the following CSS code if you want to target SiteOrigin Image widget title only.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

div.so-widget-sow-image > h3.widget-title {
    font-size: 20px;
    color: green !important;
}

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

Kind Regards, Roman.

Hi Roman, unfortunately I didnt start a child theme-is this a problem?

Hi Kharis, If I use the text widget rather, how do i change the title size ect. At the moment I have the following css for my content area:

.content-area {
font-size: 16px;
text-align: center;
}

Now for the title?

Thanks so much

I came right.Thank you for all your help

Hi,
I’m trying to make the same change but only in the mobile version. I’m not getting.
Can you help me please?

Hello Andrea,

To CSS on mobile screen, you have to wrap the code with media query. For example:


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

  h3.widget-title{
    font-size: 20px;
    color: #fff000;
  }

}

Thank you for your help.
It works fine, but I think I need to change the sections separately, because it has differences between one and another. Is it possible to only change the title of the sections separately?
Thank you so much for your help, you guys are great.

Hello there,

To target specific CSS code on a selected widget, you have to assign a custom class name to it. Edit your widget, expand Attributes tab in the Widget Styles section, then enter your custom class name to Widget Class input field. For instance: my-widget-1

Then you’ll need the below CSS code:


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

  .my-widget-1 h3.widget-title{
    font-size: 20px;
    color: #fff000;
  }

}

Regards,
Kharis