Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 24, 2016 at 8:05 am #588201
    BMart

    I am trying to get my homepage split vertically 50/50 with an image on each side, full browser height. Basically, two images that fill the whole screen, split down the middle vertically, as if you could put two full-height color sections at 50% widths.

    I have setup a grid row with two columns and assigned images to each column background. I see I can define the height of the grid a certain pixel value, but not percentage. How do I make the grid row full height? I have tried to edit all related CSS, but nothing works. Or, is there a better way to accomplish getting full-height 50/50 split images that extend 100% width as well?

    Thanks!

    • This topic was modified 8 years, 10 months ago by BMart.
    February 24, 2016 at 8:57 am #588230
    Basilis

    Hey BMart!

    can we please see a live version of what you have done, so we can understand and assist?

    Cheers!
    Basilis

    February 25, 2016 at 7:23 am #588794
    BMart

    Hey Basilis,

    Link attached in the private content. I’m not dead set on using a grid row to accomplish this, I just can’t find another way to get two 50% image columns full height. If you can think of a different way to accomplish the same thing in Enfold, or a way to make the Grid Row work, I’d appreciate any help you can provide.

    Thanks in advance.

    February 25, 2016 at 9:36 pm #589468
    BMart

    Been working on the site and the URL for this page has changed. Still wondering if there is a solution. I have updated the URL in the private content.

    February 29, 2016 at 2:40 pm #590762
    Yigit

    Hey!

    Please refer to this post and add a color section element to your page with a unique ID and fullwidth container – http://kriesi.at/documentation/enfold/color-section-with-100-container/. Then add two 1/2 column elements into your color section and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #fwcs .flex_column { width: 50% !important; margin: 0!important; }

    and set your color section element to display 100%.

    Regards,
    Yigit

    March 1, 2016 at 5:27 am #591332
    BMart

    Thanks for the response Yigit,

    That worked to make the 1/2 column elements full width, but making the color section 100% did not impose full height on the contained 1/2 column elements. You can preview the result at the URL I provided, although ignore what’s below the fold as I am experimenting with different methods. Below is a comp of what I’m trying to accomplish. I haven’t found a way to create this with the ALB yet. Any approach to accomplish this would be appreciated.

    comp

    Thanks

    • This reply was modified 8 years, 9 months ago by BMart. Reason: Edited photo URL
    March 3, 2016 at 9:37 am #592507
    Vinay

    Hi!

    Sorry for the delay.
    We are working on your ticket please wait while we update the results here soon.

    To achieve the design similar tot he mockup you have shared.

    Please use a “Grid row” element and use 2 1/2 sections and background image and make it “stretch to fit”

    Turn on custom class http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    For the main Grid add class “full-height” as shown in the below screenshot

    Add the below css in Quick CSS

    /* Full height*/
.full-height {
height:100vh;
}

    ANOTHER EASY WAY

    Enable enfold debug mode and Custom class support
    kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    Create a new page and paste the below shortcode in default editor and publish/update the page

    [av_layout_row border='' min_height='600px' color='main_color' mobile='av-flex-cells' id='' custom_class='full-height']
[av_cell_one_half vertical_align='middle' padding='150px' padding_sync='true' background_color='#ffffff' src='http://localhost/_proj/enfold/wp-content/uploads/2015/07/minimal-workpiece-4-1-705x430.jpg' attachment='98' attachment_size='featured' background_attachment='scroll' background_position='top left' background_repeat='stretch' custom_class='']

[/av_cell_one_half][av_cell_one_half vertical_align='top' padding='50px' padding_sync='true' background_color='' src='http://kriesi.at/themes/enfold-shop/files/2015/03/hipster-girls-working.jpg' attachment='554' attachment_size='full' background_attachment='scroll' background_position='center center' background_repeat='stretch']

[/av_cell_one_half]
[/av_layout_row]

    lastly select transparent header from the page right sidebar.

    If you still have issues please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 9 months ago by Vinay.
    March 13, 2016 at 11:50 pm #597448
    BMart

    Thanks, Vinnie!

    March 15, 2016 at 8:02 am #598222
    Rikard

    Hi,

    Glad we could help :-)

    Regards,
    Rikard

    October 28, 2016 at 12:45 pm #705262
    laskodo

    Hi,
    I’ve the same problem – need to set grid row’s height to 100% (not in pixels).
    Solutions above do not work for me (screenshot is no longer available). Could you help me? The link to my website is in private content.
    Thanks in advance.

    October 30, 2016 at 6:32 pm #705854
    Vinay

    Hi,

    Your issue is different from the above hence the code will not work. We need to take a closer look at the backend setup please create a new ticket and post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    The URL to the login screen.
    A valid username (with full administration capabilities).
    As well as a password for that username.
    permission to deactivate plugins if necessary.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Grid Height 100%’ is closed to new replies.