Docs

[Alexanderje]

Hi,

My Creative CTA element on http://www.clickanimated.com is rather big, as you can see. Obviously it needs to draw attention. However, it’s too big on a mobile site. I’d like the text of the CTA (just the text, the rest of it will adapt by itself) to be smaller for mobile device. So what I basically want is that the font size goes to 50% (or 30px) for screens smaller than 1080px in width.

Is this possible, and if so, how?

I tried working with classes already but that didn’t work. I first added this in Custom CSS (via Customizer > Custom – Edit Global CSS):

@media (max-width: 1079px ) {
.smalltext {
  font-size: 30px;
}

And then set smalltext as the class of the CTA but that didn’t work as mentioned.

If you need more information I’d be happy to provide it.

[Rupok]

Hi there,

Thanks for writing in! Let’s update your code to following :

@media (max-width: 1079px ) {
.x-creative-cta.smalltext span {
  font-size: 30px !important;
}
}

Hope this helps.

Cheers!

[Alexanderje]

That worked! Thank you very much!

Is there a list of such references (like .x-creative-cta)? Because I want to do something similar for Custom Headline elements. (And more probably in the future)

[Rad]

Hi there,

Glad to hear that and you’re welcome!

There is no list, but you can always use browser developer tools to inspect your site’s elements. You should able to see all classes and IDs that can be used for CSS. You can try Chrome’s Developer Tools.

Thanks!

[Author]

Posts