Avada Forums Community Forum Individual Title Size for Flipboxes via CSS Reply To: Individual Title Size for Flipboxes via CSS

Michael C
Keymaster
Post count: 549

Hi @MatrimTheGambler,

You are on the right track, however:

.flipboxclassID {
title-size: 10px !important;
}

Would target the overall flipbox element, rather than just the heading that you want to change. Also CSS property is font-size, not title-size.

A quick guide for you:
1. Add the CSS class: http://prntscr.com/jw8psd
2. Find the element within that which you want to target (eg the title text and using Chrome as an example). Right click on the area of the flipbox and select inspect.
3. Click the icon in the developer tools, the one on the far left. This is used to select an element on page.
4. After that is active hover over the flipbox until it has highlighted the title you want to edit and click.
5. Read the class that it gives you – http://prntscr.com/jw8sff or check the existing CSS – http://prntscr.com/jw8t9w (you can also click the + sign in top right and write your CSS code to test it out and tweak)
6. Put it all together:

.my-flip-box h2.flip-box-heading {
    font-size: 10px !important;
}

You have the my-flip-box class to make sure we only target that flipbox. Then there is a space and we add the class of element we want to target that is a child of that.