Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #1091026

    Hello I am trying to reproduce the second element of the home page of this site

    I’ve tried using the color section containing a column with a color transparency but I can’t get the column to be of the same height as the color section.

    I also have difficulties for the slider to partially cover part of an element



    Hey juliovilaine,

    I have checked your site and it seems you have already done the full height column.
    Where do you want to reproduce the 2nd element you have?
    For the slider partially covering a part of an element, you can use z-index to adjust it but I don’t see any issues atm.

    Best regards,


    What I am trying to reproduce is the transparent green column where the text “Eco Tropical Living” is written.

    Currently my column inside the color section is not top to bottom.

    I hope I am clearer


    Hi juliovilaine,

    Can you please attach a mockup of what you’re trying to achieve?

    Best regards,


    So I am trying to achieve that:

    I am getting there at the moment:



    Hi juliovilaine,

    I see, we currently don’t have that feature but I think it can be done with some custom css.
    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

    Best regards,




    Hi juliovilaine,

    Thanks for giving us admin access. I have added a Custom Class to the section (named it flex-section).
    Then in Quick CSS, located in Enfold > General Styling:

    #top #main .flex-section .template-page, 
    #top #main .flex-section .template-page .entry-content-wrapper, 
    #top #main .flex-section .template-page .flex_column_table {
        display: flex !important;
        height: 100%;
    #top #main .flex-section .template-page .flex_column_table .flex_column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    #top #main .flex-section .template-page .flex_column_table .flex_column .av_textblock_section {
        padding: 10px 100px;
    #top #main .flex-section .template-page .flex_column_table .flex_column .avia-slide-slider {
        width: 125%;
        margin-left: -25%;

    Best regards,


    Hi! I want to achieve sort of the same for my site. This code is not working, but I can do it with padding top and bottom. Than the background is sort of full height, but the pink background stops at the menu header. Is it possible to make the content of this section go behind the transparent header? See link attached!

    Thanks a lot! Janneke


    Hi jannnnnneke,

    We apologize for the delayed response.
    Can you give a screenshot of the issue or at least what you want to achieve?
    If I check the link you gave the semi-transparent menu header is above the content and pink background.

    Best regards,


    Hi! Yes I want the pink column to reach the top of the screen. Now it stops at the bottom of the header menu, but I’m using the transparency header so I would like the pink column to go behind/above the header menu. I’ve made a screenshot and added a pink color in it so you can see what I mean.



    Hi jannnnnneke,

    Try adding this CSS code in Quick CSS, located in Enfold > General Styling:

    .page-id-2 #av_section_1 .av_one_fourth {
        position: absolute;
        top: -140px;

    Hope it helps.

    Best regards,


    Yes, perfect!! THANK YOU!


    Hi jannnnnneke,

    Where glad that we could help :)
    Let us know if you need further assistance.

    Best regards,

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