Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 16, 2019 at 12:21 pm #1067684
    Synne

    Hi,

    For some reason, when I define a 3 column grid or row, the column in the middle is bigger than the other two – causing the center image to become slightly bigger. Since all 3 images have the exact same dimensions, I’d prefer them to look the same.

    Can you help a brother out? :-)

    February 16, 2019 at 9:44 pm #1067809
    Mike

    Hey Synne,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #av-layout-grid-1 .avia-image-container img {
height: 425.688px !important;
max-height: 425.688px !important;
}

#av_section_1 .avia-image-container img {
height: 311.188px !important;
max-height: 311.188px !important;
}

    This will adjust all of the images on your test page, to apply this for other pages please assign a unique custom class or ID for the image and replace the ID in the begining of the code.
    Please see the custom ID option at Enfold Theme Options > Layout Builder > Show element options for developers
    Please let us know if you need some assistance with this.

    Best regards,
    Mike

    February 17, 2019 at 7:00 am #1067862
    Synne

    Hi Mike,

    Using that code overrides responsiveness and just drags the pictures to fit the screen. You can try dragging the window in and out to see what I mean. Although they are the same size now the technique isn’t ideal :-)

    Hope you have another trick up your sleeve.

    Cheers,
    Jesper

    February 17, 2019 at 6:15 pm #1067922
    Mike

    Hi,
    I tried to recreate your page on my localhost, at the top I placed a grid row with the images in each grid at full size:
    2019-02-17-110349
    and below that I placed 3 columns with zero padding and used “Equal Height” with the images at full size:
    2019-02-17-110645
    the result was that all images were the same size and the lined up nicely without any additional css or tricks:
    2019-02-17-110030
    Try Enabling Avia Layout Builder Debugger and paste this shortcode in the paser at the bottom of the page:
    2019-02-17-111222

    [av_layout_row border='' min_height_percent='' min_height='0' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-agpo17']

[av_cell_one_third vertical_align='top' padding='0px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-8q2frf' custom_class='']

[av_image src='https://127.0.0.1/2017demo1/wp-content/uploads/2019/02/1.png' attachment='3165' attachment_size='full' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-js93dghn' custom_class='' admin_preview_bg=''][/av_image]

[/av_cell_one_third][av_cell_one_third vertical_align='top' padding='0px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-6ua8jf' custom_class='']

[av_image src='https://127.0.0.1/2017demo1/wp-content/uploads/2019/02/2.png' attachment='3166' attachment_size='full' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-js93e2oe' custom_class='' admin_preview_bg=''][/av_image]

[/av_cell_one_third][av_cell_one_third vertical_align='top' padding='0px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' av_uid='av-63fl5n' custom_class='']

[av_image src='https://127.0.0.1/2017demo1/wp-content/uploads/2019/02/3.png' attachment='3167' attachment_size='full' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-js93f1id' custom_class='' admin_preview_bg=''][/av_image]

[/av_cell_one_third][/av_layout_row][av_one_third first min_height='av-equal-height-column' vertical_alignment='av-align-top' space='no_margin' margin='0px' margin_sync='true' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' padding='0px' padding_sync='true' highlight_size='1.1' border='' border_color='' radius='0px' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-js939ne0' custom_class='']
[av_image src='https://127.0.0.1/2017demo1/wp-content/uploads/2019/02/1.png' attachment='3165' attachment_size='full' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-js93fgfx' custom_class='' admin_preview_bg=''][/av_image]
[/av_one_third]

[av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-40fm2z']
[av_image src='https://127.0.0.1/2017demo1/wp-content/uploads/2019/02/2.png' attachment='3166' attachment_size='full' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-js93fxiy' custom_class='' admin_preview_bg=''][/av_image]
[/av_one_third]

[av_one_third min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' link='' linktarget='' link_hover='' padding='0px' highlight='' highlight_size='' border='' border_color='' radius='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-arsrv']
[av_image src='https://127.0.0.1/2017demo1/wp-content/uploads/2019/02/3.png' attachment='3167' attachment_size='full' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-js93gave' custom_class='' admin_preview_bg=''][/av_image]
[/av_one_third]

    you may need to replace the images as mine are on my localhost, but you should get the columns setup as I do.

    Best regards,
    Mike

    February 17, 2019 at 6:46 pm #1067938
    Synne

    Hi Mike,
    Great! It works on the normal columns in a color section, just not in a grid. I’ll just do some CSS to get the color section content to go full width :-)
    Thanks for your help!

    February 17, 2019 at 7:32 pm #1067958
    Mike

    Hi,
    Glad to help, let us know if you need additional help with this or if we can close this.

    Best regards,
    Mike

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