Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • June 5, 2021 at 7:55 am #1304186
    BMMtOliveLC

    I have created a page with 2 columns. Each row has 1/2 content elements. On a computer the columns display correctly, but on a mobile device they do not display as I want. In particular, the page has 3 rows. Call the elements in the first row (1,1) and (1,2); the elements in the second row (2,1) and (2,2) and the elements in the third row (3,1) and (3,2). On a computer the elements (1,1), (2,1) and (3,1) display on the left hand side, while the elements (1,2), (2,2) and (3,2) display on the right hand side.

    However, on a mobile device the elements display in one column in the order (1,1), (2,1), (2,1), (2,2), (3,1) and (3,2), What I want is for them to display in one column in the order (1,1), (2,1), (3,1), (1,2), (2,2) and (3,2). In other words I want the first column elements to display contiguously, then the second column elements to display contiguously.

    I have not be able to achieve the goal. Is there a way to force this order on a mobile device?

    June 8, 2021 at 2:47 am #1304497
    Ismael

    Hey BMMtOliveLC,

    Thank you for the inquiry.

    This should be possible using flexbox and the order property. You can add a new css media query for mobile screens and re-arrange the cells or columns by using the order property. The display property of the parent container should be set to flex. Please check the articles below for more info about flexbox layout.

    // https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Best regards,
    Ismael

    June 8, 2021 at 4:39 am #1304515
    BMMtOliveLC

    Thanks for your reply. I am not a CSS expert, but have some limited knowledge of it. I am using the AVIA layout builder to create the page. How do I set the display property of the parent page container to flex in the AVIA editor? Also, are there some links you can provide that explain now to create and use the “css media query for mobile screens” in this situation.

    June 9, 2021 at 8:06 am #1304798
    Ismael

    Hi,

    You have to set flex via css in the Quick CSS field or in the style.css file. If you can provide the page URL, we could inspect it and try to provide the css code to adjust the order of the columns on mobile view.

    Best regards,
    Ismael

    June 9, 2021 at 7:27 pm #1304967
    BMMtOliveLC

    The page under scrutiny is in a members only area and access is controlled using the Content Control plugin. So, I have to create a temporary account for you in order for you to examine the page. What role privileges would you need?

    June 11, 2021 at 1:11 pm #1305263
    Ismael

    Hi,

    An administrator account would be nice. We may need to edit the page, add css in the Quick CSS field or the style.css file and adjust the theme options.

    Best regards,
    Ismael

    June 11, 2021 at 5:07 pm #1305307
    BMMtOliveLC

    OK. I will create a guest account with admin privileges on our development site. This will allow me to delete the sensitive content on the page you will examine. I ask that you restrict yourself to this page and not examine other content pages on the site.

    I will need an email address for the account. This is necessary so you can get a password for the account without me putting one in a post that is publicly readable. If you do not want to put your email address in a post, you can send it to me at: dan.nessett@gmaildotcom (do the obvious translation of gmaildotcom). I will then send you the name of the account and you can use the “get new password” feature of login to set your password.

    June 14, 2021 at 7:44 am #1305537
    Ismael

    Hi,

    Please provide a login token by using the plugin mentioned below or by doing the following steps.

    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 wordpress@kriesi.at ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( to 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 the 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. You can use the email wordpress@kriesi.at. But please note that we do not have access to this email, so make sure to generate the password on registration.

    Best regards,
    Ismael

    June 24, 2021 at 4:40 pm #1307329
    BMMtOliveLC

    It has been 10 days since I created a temporary login for you on our development site. So far, I have seen no work by you to fix the problem. The temporary login has now expired. Can you give me a status report on this issue?

    June 25, 2021 at 1:50 pm #1307441
    Ismael

    Hi,

    Where did you post the temporary login? We did not receive any replies from you after our last response above or when we asked you for the login token. Please note that you have to post the login token URL here in the forum. Did you send it to an email?

    Best regards,
    Ismael

    June 25, 2021 at 2:07 pm #1307450
    BMMtOliveLC

    I sent the link in a private reply (in the private content section of the post), per your instructions.

    • This reply was modified 3 years, 6 months ago by BMMtOliveLC.
    June 26, 2021 at 1:03 am #1307482
    BMMtOliveLC

    I should have mentioned that the temporary login timed out and I deleted it. If you need to access the account, I need to get you a new temporary login.

    June 27, 2021 at 4:14 am #1307555
    Rikard

    Hi,

    Thanks for the update. I can’t see any login details or tokens in this thread, please try sending it again. Also make sure to write something in the public box as well when you send it.

    Best regards,
    Rikard

    June 27, 2021 at 3:38 pm #1307598
    BMMtOliveLC

    Temporary login. Link in private content. Expires in one week.

    June 28, 2021 at 1:56 pm #1307746
    Ismael

    Hi,

    The login token above is not working. Are you sure that it is still valid? Would you mind posting the admin account that you are using so that we can access the dashboard?

    Examples of the solution that we described above can be found here.

    // https://kriesi.at/support/topic/element-layout-in-mobile/#post-1193991
    // https://kriesi.at/support/topic/flex-columns-on-2-51-51-51-5/#post-1299173
    // https://kriesi.at/support/topic/sidebar-on-smartphone/#post-1262386

    Best regards,
    Ismael

    June 28, 2021 at 6:11 pm #1307810
    BMMtOliveLC

    I have created a temporary admin without using the plugin. It will be valid for 7 days. I have tested logging into the account and it works. Credential information is included in the Private Content area of this message

    June 29, 2021 at 11:36 am #1307911
    Ismael

    Hi,

    We cannot find the page with the 1/2 columns, so we created a draft page instead. We added a color section and applied a unique class name to it called “av-custom-column-order” so that we can differentiate it from other color sections. In the color section, we inserted three rows with two 1/2 column elements each. Then we added this css code in the Enfold > General Styling > Quick CSS field to reverse the order of columns in each row on mobile view

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-custom-column-order .entry-content-wrapper {
    display: flex;
    direction: ltr;
    flex-direction: column;
  }

  .av-custom-column-order .av_one_half:nth-child(1) {
    order: 2;
  }

  .av-custom-column-order .av_one_half:nth-child(2) {
    order: 1;
  }

  .av-custom-column-order .av_one_half:nth-child(3) {
    order: 4;
  }

  .av-custom-column-order .av_one_half:nth-child(4) {
    order: 3;
  }

  .av-custom-column-order .av_one_half:nth-child(5) {
    order: 6;
  }

  .av-custom-column-order .av_one_half:nth-child(6) {
    order: 5;
  }
}

    See private field for the draft page link.

    Best regards,
    Ismael

    June 29, 2021 at 4:55 pm #1307973
    BMMtOliveLC

    Thanks Ismael. In order to apply this CSS to the page in question, I need to associate it with “av-custom-column-order”. I don’t know how to do this. Would you elaborate?

    Added Later: Actually, I figured it out. You have to go to the Color Section->Advanced->Developer Settings and put av-custom-column-order in the Custom CSS Class.

    • This reply was modified 3 years, 6 months ago by BMMtOliveLC.
    June 30, 2021 at 12:31 am #1308014
    BMMtOliveLC

    I have another question about Mobile Styling. I have a submenu in the Top Menu. I want to put submenu items in it. When I do so, however, the sub-sub-menu items displayed to the left. This puts them off the mobile device boundary. What I want to do is force all menu items, no matter what their depth, to display to the right.

    Should I make this a separate topic?

    June 30, 2021 at 1:52 pm #1308129
    Ismael

    Hi,

    Glad to know that you figured it out.

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

    June 30, 2021 at 5:16 pm #1308181
    BMMtOliveLC

    I will open another thread.

    However, I have run into a problem moving your solution to our live site. It works on our development site for the page that had the problem (not just the post you created). When I moved the CSS to the live site and associated the page with av-custom-column-order, the page ordering becomes chaotic. I had to enhance the CSS you provided to apply it to the page under question (on both the development and lives sites). In particular, I used:

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .av-custom-column-order .entry-content-wrapper {
    display: flex;
    direction: ltr;
    flex-direction: column;
    }
    .av-custom-column-order .av_one_half:nth-child(1) {
    order: 1;
    }
    .av-custom-column-order .av_one_half:nth-child(2) {
    order: 6;
    }
    .av-custom-column-order .av_one_half:nth-child(3) {
    order: 2;
    }
    .av-custom-column-order .av_one_half:nth-child(4) {
    order: 7;
    }
    .av-custom-column-order .av_one_half:nth-child(5) {
    order: 3;
    }
    .av-custom-column-order .av_one_half:nth-child(6) {
    order: 8;
    }
    .av-custom-column-order .av_one_half:nth-child(7) {
    order: 4;
    }
    .av-custom-column-order .av_one_half:nth-child(8) {
    order: 9;
    }
    .av-custom-column-order .av_one_half:nth-child(9) {
    order: 5;
    }
    .av-custom-column-order .av_one_half:nth-child(10) {
    order: 10;
    }
    }

    This worked fine on the development site. However, when I installed it on the live site, the order of nth-child elements displayed in a single column on a mobile device became: 1, 2, 3, 6, 4, 5, 7, 8, 9, 10; not 1, 3, 5, 7, 9, 2, 4, 6, 8, 10. The only difference I can think of between the live and development site is I did not create the example post on the live site that you provided on the development site.

    Was there some other configuration you made on the development site besides installing the CSS and associating the page with av-custom-column-order?

    July 5, 2021 at 8:16 am #1308710
    Ismael

    Hi,

    Did you apply the av-custom-column-order class name to the color section containing the columns? Please provide a direct link to the page with the columns so that we could check it.

    Best regards,
    Ismael

    July 5, 2021 at 5:18 pm #1308823
    BMMtOliveLC

    Yes, I applied “the av-custom-column-order class name to the color section containing the columns.” While I thank you for offering to fix the problem on our live web site, this would not teach me anything about how wordpress and Enfold use CSS to modify the display of posts/pages. I would prefer it if you would tell me how to analyze the problem myself.

    For example, while I understand the class identifier “av-custom-column-order” should appear somewhere in the HTML on the displayed page, I don’t know what a color section turns into in the HTML. I can use the inspector features of my browser to see if “av-custom-column-order” is being used to tag a HTML element, but I need to understand where in the HTML it might appear. Additionally, I don’t know where the CSS from the Quick CSS field should appear. I can look to see if it’s there, but I need to know where to look.

    Added Later: I found where in the HTML the “av-custom-column-order” tag appears. It is in a div section with id “av_section_1” This tag appears in both the test and live site HTML. So, setting the class id in the color element seems to work properly in both cases. However, I could not find where the CSS is transmitted to the browser.

    • This reply was modified 3 years, 5 months ago by BMMtOliveLC.
    July 5, 2021 at 6:24 pm #1308828
    BMMtOliveLC

    I am including two HTML fragments in the Private Content section. The first is the HTML for the test site related to the flex column table feature. This is the HTML that works properly. The second is the HTML for the live site. This doesn’t work properly. The two are significantly different. The test site HTML has a section “<div class=”entry-content-wrapper clearfix”>” that heads the flex information, while the live site has a section “<div class=”flex_column_table av-equal-height-column-flextable -flextable”>” that does the same.

    July 7, 2021 at 6:14 am #1309024
    Ismael

    Hi,

    The code in the Quick CSS field is saved or added in the stylesheet located in the wp-content > uploads > dynamic_avia folder. The theme loads this file along with other stylesheets.

    Since we cannot access the site, please set the builder to debug mode, copy the actual shortcode from the debug mode field just below the advance layout builder and post it here using pastebin or using the same code sharing tool (controlc) that we used above.

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

    Best regards,
    Ismael

    July 10, 2021 at 12:38 am #1309439
    BMMtOliveLC

    I assume this is what you are looking for (I X’d out the telephone numbers to retain privacy of member information):

    [av_section min_height='' min_height_pc='25' min_height_px='500px' padding='default' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='av-custom-column-order' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-kqioerxg' sc_version='1.0']

    [av_one_half first min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='0px' padding_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' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-by9gfc' sc_version='1.0']

    [av_image src='https://mountolive.com/wp-content/uploads/2021/06/Prayer-Request-Image-Scaled-300x240.jpg' attachment='6096' attachment_size='medium' copyright='' caption='' styling='' align='left' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' hover='' appearance='' link='' target='' title_attr='' alt_attr='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-kpj8b6p6' sc_version='1.0' admin_preview_bg=''][/av_image]

    [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-b8sj60' sc_version='1.0']

    [av_image src='https://mountolive.com/wp-content/uploads/2021/06/Christ-the-Lamb-300x240.jpg' attachment='6099' attachment_size='medium' copyright='' caption='' styling='' align='left' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' hover='' appearance='' link='' target='' title_attr='' alt_attr='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-kpj90fig' sc_version='1.0' admin_preview_bg=''][/av_image]

    [/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-2do6x4' sc_version='1.0']

    [av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-abb43s' sc_version='1.0']

    [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-4h3du0' sc_version='1.0']

    [av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-8vzjrc' sc_version='1.0']

    [/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-3j0qvs' sc_version='1.0']

    [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kpges3fg' sc_version='1.0' admin_preview_bg='']
    <h2>Current Prayer Requests</h2>

    • <div>6/30/21  Please pray for Janet Iverson’s brother, Steven Van Dyke.  He is at Mayo and will have open heart surgery tomorrow, Thursday July 1.  He is in his 60’s   Prayers for Steven and his mom, Janet.</div>
    • <div></div>
      <div>7/5/21  Also, prayers for Elfrieda Kahler’s family.  Elfrieda passed away Saturday morning.   Prayers for  her family and Pastor’s sermon at her funeral that every person will know and trust in Jesus as their Savior.</div>
    • 7/5/21  Please pray also for Ruth Terry’s family. Ruth’s mom passed away Sunday. Pastor will also have her funeral this week. Please pray for pastor and his family.  Also that every person in Ruth’s family will be moved by the Holy Spirit and know Jesus as Savior and Lord.
    • 7/7/21  Please pray for Adell Coombs’s son Isaac Webb. Isaac hurt his ankle at basketball camp Monday night and damaged his growth plate. Please pray for healing and that he can get something out of basketball camp even though he can’t do all the the activities.

    [/av_textblock]

    [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-3wnsco' sc_version='1.0']

    [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kpget2y8' sc_version='1.0' admin_preview_bg='']
    <h2>Answered Prayers</h2>
    [/av_textblock]

    [/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-7gec6w' sc_version='1.0']

    [av_hr class='default' icon_select='yes' icon='ue808' position='center' shadow='no-shadow' height='50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-2q6q20' sc_version='1.0']

    [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-47uy8o' sc_version='1.0']

    [/av_one_half][av_one_half first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-56odp4' sc_version='1.0']

    [av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-4ka1x4' sc_version='1.0' admin_preview_bg='']
    <h3 style=”text-align: left;”>If you have an issue you wish to submit to the Prayer Request page, please contact Arlene De Boer at XXX-XXX-XXXX or Sharon McDunn at XXX-XXX-XXXX</h3>
    [/av_textblock]

    [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='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' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-9bs0o' sc_version='1.0']

    [/av_one_half][/av_section]

    • This reply was modified 3 years, 5 months ago by BMMtOliveLC.
    July 12, 2021 at 4:41 am #1309656
    Ismael

    Hi,

    Is this how you would like to sort the columns?

    Screenshot: https://postimg.cc/kR70QGhM

    If it is, make sure that the Equal Height option for each row is disabled, then use this css code.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-custom-column-order .entry-content-wrapper {
    display: flex;
    direction: ltr;
    flex-direction: column;
  }

  .av-custom-column-order .av_one_half:nth-child(1) {
    order: 1;
  }

  .av-custom-column-order .av_one_half:nth-child(2) {
    order: 4;
  }

  .av-custom-column-order .av_one_half:nth-child(3) {
    order: 5;
  }

  .av-custom-column-order .av_one_half:nth-child(4) {
    order: 3;
  }

  .av-custom-column-order .av_one_half:nth-child(5) {
    order: 2;
  }

  .av-custom-column-order .av_one_half:nth-child(6) {
    order: 6;
  }
}

    Best regards,
    Ismael

    July 12, 2021 at 5:28 am #1309674
    BMMtOliveLC

    The Equal Height option for the first row was set. Once I set it to individual height for that row (all other rows were set to individual height), the order of the rows on mobile devices were displayed in the correct order. Thank you.

    Cheers,
    Dan Nessett

    July 12, 2021 at 6:46 pm #1309844
    BMMtOliveLC

    This solves the problem. You can close the ticket, if you wish.

    July 13, 2021 at 12:58 pm #1309944
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 30 total)
  • The topic ‘Mobile device display order’ is closed to new replies.