Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 11, 2024 at 6:26 am #1439700
    StrategyDriven

    Hello,

    I added a single flip box via short code to an Enfold 1/2 column and would like to have it aligned to the right side and bottom. The element naturally aligns to the bottom, however, the flip box element is horizontally aligned to the center. I found this to be the case when entering the short code into both a text box and code block elements.

    Is there any way I can align the flip box element to the right? Note that the flip box itself does not have any margins or padding preventing it from being aligned to the right or the left.

    Note that I have tried the following and they did not work:

    <div align=”right”>
    [shortcode]
    </div>

    and

    <div style=”float:right;”>
    [shortcode]
    </div>

    Thank you!

    All the Best,
    Nathan

    April 11, 2024 at 10:47 am #1439728
    Ismael

    Hey StrategyDriven,

    Thank you for the inquiry.

    We may need to inspect the page to properly understand the issue. Please provide the page URL in the private field. In the meantime, you can try this:

    <<div style='float:right;clear:none;position:relative;'>
   [shortcode]
</div>

    Best regards,
    Ismael

    April 11, 2024 at 3:17 pm #1439747
    StrategyDriven

    Thank you for the feedback, Ismael. Unfortunately, when I add that code to the text box and code block my short code element vanishes on the webpage.

    I greatly appreciate your continued help with this item. Enjoy the day!

    All the Best,
    Nathan

    April 11, 2024 at 4:50 pm #1439759
    StrategyDriven

    See private content for login and URLs.

    We have been working several design options for this element. The one with the issues can be viewed at the bottom of the preview page. It consists of four columns with a 1/4 circle graphic image in the center corner of each. The upper left column that has no graphic is the one within which we applied the <div> code. The upper right shows a flip box element that rests on the bottom of the column, as desired, but is centered instead of left justified (in that column’s case).

    Thank you for your continued help. Enjoy the day!

    April 12, 2024 at 10:26 am #1439802
    Ismael

    Hi,

    Thank you for the info.

    You can remove the < div > wrapper with the inline style, and instead use this css code to make the flipbox float to the right:

    .av_textblock_section.av-kixjzxtp-9ed3a66d2a7d456cbfa2223874306927 .oxi-addons-container .oxilab-flip-box-body-7 {
    float: right;
}

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Best regards,
    Ismael

    April 15, 2024 at 9:07 pm #1440061
    StrategyDriven

    Hi Ismael,

    That did the trick! Thank you!

    One more quick question… is there a way to apply a Developer CSS name to the text box element and to the Quick CSS to make the naming simpler?

    Again, I greatly appreciate your help. Enjoy the day!

    All the Best,
    Nathan

    April 16, 2024 at 8:14 am #1440074
    Ismael

    Hi,

    One more quick question… is there a way to apply a Developer CSS name to the text box element and to the Quick CSS to make the naming simpler?

    Yes, this is possible. Please refer to the documentation provided above. Edit the Text Block element, go to the Advanced > Developer Settings, and specify/fill in the Custom CSS Class names or the Custom ID Attribute. You can then modify the css code based on the new class names or ID attribute.

    Best regards,
    Ismael

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