Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 25, 2021 at 8:44 pm #1312247
    julhobart

    Hi there! I’m trying to create a fullwidth banner that has 2 separate columns but together they are fullwidth. How do I do this? I do not want a color section with 2 elements inside unless I can stretch those elements to fullwidth. Please help. Thanks!

    July 28, 2021 at 10:28 am #1312987
    Ismael

    Hey julhobart,

    Thank you for the inquiry.

    Have you tried using the Grid Row element? You can add two cells inside the grid with different content.

    Best regards,
    Ismael

    August 13, 2021 at 5:13 am #1316514
    julhobart

    No, I have tried it! I’m just learning about this now – thanks for telling me about it Ismael. I’m struggling a little bit with the settings. I found this page:

    Meet the Team

    Towards the bottom is an example of exactly what I’m trying to do! Can you tell me the settings for the grid row that has an image with people in it on the left and text on the right that says “Our support team”. I cannot get my image to look right. I’d like to know image size and other settings.

    Thanks!
    Julie

    August 13, 2021 at 7:34 am #1316553
    Ismael

    Hi,

    The image (1000x400px) in the left side is set as the background image of the first cell, and the second cell to the right contains a special heading, separator/whitespace, a text block and and icon element.

    If the debug mode is enabled for the builder, you can actually paste the following shortcodes and update the page to get the same layout. You will just have to update the images and other content.

    
[av_layout_row border='' min_height_percent='' min_height='400px' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' av_uid='av-2kgi44']
[av_cell_one_half vertical_align='middle' padding='130px' padding_sync='true' background_color='' src='http://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/business-support-1.jpg' attachment='582' attachment_size='full' background_attachment='scroll' background_position='top center' background_repeat='stretch' mobile_display='' av_uid='av-2gn4wc']

[/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='30px' padding_sync='true' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' mobile_display='' av_uid='av-28u4dw']

[av_heading tag='h2' padding='0' heading='Our Support Team' color='' style='blockquote modern-quote modern-centered' custom_font='' size='30' subheading_active='subheading_below' subheading_size='15' custom_class='' admin_preview_bg='' av_uid='av-24odyc']
Customer Satisfaction
[/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='15px' custom_margin_bottom='15px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-1vleck']

[av_textblock size='' font_color='' color='' admin_preview_bg='' av_uid='av-1o6scs']
<p style="text-align: center;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

[/av_textblock]

[av_font_icon icon='ue8f1' font='entypo-fontello' style='' caption='' link='manually,http://twitter.com' linktarget='_blank' size='20px' position='center' color='' admin_preview_bg='' av_uid='av-1n2g70'][/av_font_icon]

[/av_cell_one_half]
[/av_layout_row]

    Here is how you can set the ALB to debug mode.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

    Best regards,
    Ismael

    August 18, 2021 at 10:34 pm #1317384
    julhobart

    Thanks for this Ismael! When I set this up, the 2 elements in the grid row on my site have a space between them when I widen the browser. I can see that doesn’t happen on the meet the team page.

    Can you tell me what setting is needed to prevent that? I’m not using shortcode and don’t want to because that makes future customizations more difficult.

    Thanks!
    Julie

    August 20, 2021 at 11:56 am #1317613
    Ismael

    Hi,

    Thank you for the update.

    I can only see the issue when I increase the screen resolution to be larger than 4k. This is not a common resolution, so you should not be worrying about it. But if you want the background image to stretch on these resolutions, you can set the cell’s Styling > Background > Background Repeat to Stretch to fit. You could also replace the image with a larger one.

    Best regards,
    Ismael

    August 31, 2021 at 6:06 pm #1319220
    julhobart

    Thank you! This worked perfectly.

    August 31, 2021 at 6:33 pm #1319227
    julhobart

    When I shrink the screen to mobile size, the special heading text rises to the top and creates an undesirable space. I found this code:

    @media only screen and (max-width: 767px) {
    body .av-special-heading .av-special-heading-tag {
    padding: 50% 0!important;
    }}

    and it does center the text but the background is too tall. How can I reduce the height of the cell that has a special heading. Link below

    September 2, 2021 at 12:06 pm #1319481
    Rikard

    Hi,

    Thanks for the update. Please try this CSS instead:

    @media only screen and (max-width: 767px) {
.page-id-220 #av-layout-grid-1 .av-special-heading-tag {
    padding: 25% 0 0 0 !important;
}
}

    Best regards,
    Rikard

    September 2, 2021 at 9:56 pm #1319551
    julhobart

    Hi Rikard,

    That doesn’t seem to work. It looks the same.

    Any other ideas?

    Thanks,
    Julie

    September 4, 2021 at 6:23 am #1319710
    Rikard

    Hi,

    Thanks for the update. Could you post a screenshot highlighting what you would like to change please? Also, did you remove the code which you posted here?

    Best regards,
    Rikard

    September 7, 2021 at 7:39 pm #1320019
    julhobart

    Hi Rikard,

    I figured it out! Your code was specific to one page and I was looking at other pages because I want this to work everywhere. I removed .page-id-220 and now it is perfect.

    Thanks!
    Julie

    September 9, 2021 at 5:17 am #1320186
    Rikard

    Hi Julie,

    Great, I’m glad that you figured it out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    September 9, 2021 at 4:49 pm #1320282
    julhobart

    Thanks – you can close

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How to make 2 images side by side fullwidth’ is closed to new replies.