Avada Forums Community Forum Individual Title Size for Flipboxes via CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • MatrimTheGambler
    Participant
    Post count: 5

    Hey guys, I’m not too familiar with CSS which is whys I bought this theme in the first place. I just read the guide for adding css classes and IDs to e.g. fusion builder elements.

    I cannot figure out how to change the front title size of flipboxes indivudally. I do NOT want to change it for all flipboxes but for the ones on a particular page because the h2 size is just too big in this case.

    I put a value in the CSS class and then edited custom css options in theme options like

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

    … I guess that’s just wrong 😀

    Please help!

    MatrimTheGambler
    Participant
    Post count: 5

    Anyone? Please!

    Michael C
    Keymaster
    Post count: 540

    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.

    MatrimTheGambler
    Participant
    Post count: 5

    @Michael C:

    You’re a lifesaver, that totally worked out and thx for the detailed explanation of devtools and so on!

    MatrimTheGambler
    Participant
    Post count: 5

    What I don’t understand though: this line
    #flipheight .flip-box-back-inner, .flip-box-front-inner {
    min-height: 300px !important;
    margin-top: 0 !important;
    margn-bottom: -20px !important;
    }

    I cannot control the bottom margin with margin-bottom: -10 !important; and I dont no why. I got a gap between title and the lower border of the flipbox but margin-bottom doesnt do anything :/

    MatrimTheGambler
    Participant
    Post count: 5

    I take that back, it works.

    willkeyworth
    Participant
    Post count: 7

    HI guys, I am a beginner, too…and tried following the instructions for the above workaround to change the flipbox styling, but in particular, I am looking at changing the heading text on the BACKside of the box. Can you help me? I don’t want gray text, I want white. Here: https://verdecoconstruction.com/

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.