how to change call to action font sizes?

[Jocelyn Burkhart]

Hi,
I’m wondering if it’s possible to change the text sizes in the call to action widget.
(And in general, if it’s possible to change fonts sizes and colours in the widgets).
Thanks! 🙂
Jocelyn

[Sushil Adhikari]

But of course!

You will need to do custom CSS though to override the theme’s own styling. For the Call to Action, this styling is found around line 536 and 541 and looks like:

** For the heading

#cta h1, h1.promo {
font-size: 1.938em;
margin-bottom: 0.750em;
}

**For the content part

#cta h2, h2.promo {
font-family: ubuntu-light,sans-serif;
font-size: 1.250em;
font-weight: 300;
line-height: 1.5em;
}

For widgets in general, each widget has a default class of .widget which means anything within the widget container(s) can be targeted such as:

.widget h3 {
your styles for the headings
}
.widget {
font-size: 1rem;
color: $000000;
}

etc…But it depends on what you want to customize and where in the page of widget positions because you can change things globally or on a per widget basis. But in general, widgets start off with a default class of .widget and therefore lets you change things such as font-sizes, colours, margins, paddings, backgrounds, link colours, etc.

[Jocelyn Burkhart]

Awesome, thanks!
Would you also please tell me specifically what numbers/font styles etc. I should put into this formula to get the cta content to be the same as the content text I have on the static home page? (I think I’ve modified it to be heading 3 currently)
Thanks!

#cta h2, h2.promo {
font-family: ubuntu-light,sans-serif;
font-size: 1.250em;
font-weight: 300;
line-height: 1.5em;
}

[Sushil Adhikari]

Not quite sure I understand what you are referring to?

[Jocelyn Burkhart]

I decided to not use the call to action…I’ll return to this question if it comes up again for me, and figure out what I was trying to ask then 🙂

[Author]

Posts