Important notice: we will respond to all open ticket requests up until November the 1st. After this date, we will be unable to process the ticket requests here on Ticksy.

Okay
  Public Ticket #2067169
Set Equal Column Height in Visual Composer
Closed

Comments

  • menomoniemarket started the conversation
    July 2, 2019 at 3:06pm

    We've researched this topic and understand why the Equal Column Height option was disabled in rows in Visual Composer, but we're still having issues with column responsiveness on different devices.

    The layout we're trying to achieve is two columns with a full width image on one side and text elements on the other. We tried the Elements Holder, but that caused the columns to display incorrectly on mobile. We also tried using the empty space with an image background to achieve this, but even when we add custom padding to the bottom of each side to ensure the columns are equal height, the columns are visibly very different heights on smaller screens. We can redesign each row for each device category but would like to avoid that if possible.

    Has a fix for this been developed? We're specifically having trouble on large desktop screens resizing down to laptop and iPad screens.

  •  1,845
    Elated replied
    July 3, 2019 at 12:11pm

    Hi there,

    You can try using the following code and adding it into WP Bakery page builder classic editor like in the image below:

    8603490882.png


    [vc_row][vc_column][eltdf_elements_holder number_of_columns="two-columns" switch_to_one_column="1024"][eltdf_elements_holder_item horizontal_aligment="center" animation="" background_color="#f7f5f2" item_padding_768_1024=" 33px 14% 127px 14%" item_padding_480=" 0px 17% 127px 17%" item_padding_1024_1280="158px 7% 158px 7%" item_padding_1280_1600=" 158px 7% 158px 7%" item_padding="127px 17% 127px 17%"][vc_single_image image="5347" img_size="full" alignment="center"][vc_empty_space height="40"][vc_custom_heading text="Something about us" font_container="tag:h2|font_size:40|text_align:center|line_height:36px" google_fonts="font_family:Signika%3A300%2Cregular%2C600%2C700|font_style:600%20bold%20regular%3A600%3Anormal"][vc_empty_space height="19"][vc_column_text]
<h5>Lorem ipsum dolor sit amet dictum ante tempor eget faucibus et urna eu maecenas viverraaliquam lorem id tincidunt praesent et viverra massa non varius magna eget nibh vitae velit posuere efficitur. Lorem ipsum dolor sit amet dictum ante tempor.</h5>
[/vc_column_text][vc_empty_space height="39"][vc_single_image image="6743" img_size="full" alignment="center"][/eltdf_elements_holder_item][eltdf_elements_holder_item animation="" background_image="7314" item_padding="340px 0 340px 0" item_padding_1280_1600="371px 0 371px 0" item_padding_1024_1280="371px 0 371px 0"][/eltdf_elements_holder_item][/eltdf_elements_holder][/vc_column][/vc_row]

    Please make sure that these settings are to your liking and also make sure you change the text and image to suit your needs.

    Hope this helps! If not please provide us with your wp-admin details(in a private ticket) so we can log in and investigate this further.

    If there is anything else that we can help you with please don't hesitate to ask.

    Kind regards,

    Sean

    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.