Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #874282

    Hello guys,

    I am having this problem where the icons which are supposed to be next to each other, line after line, seem to go all over the place when the captions get too long.

    You can preview the problem here: https://pijaccanada.com/events/canadian/western-canadian/icons-problem-sample/ (and it becomes even more apparent when you resize the window)

    I am also including a screen representation to help you visualize the problem (and in it you can see that if I keep the text of the caption short the problem goes away):

    icon alignment problem

    Thanks in advance of the help!

    #874886

    Hey Gabriel,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    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 (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do 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 your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Yigit

    #874894

    Hello Yigit,

    Thank you for the prompt reply. Credentials in the private content portion of my reply.

    Please, please, please avoid turning plug ins on/off as this is an active, live site! Thank you in advance for your help.

    #874898

    Hi,

    I edited 7th and 10th icon on second icon group, gave them custom CSS classes and then added following code to Quick CSS

    .page-id-7230 .av_font_icon {
        width: 15%;
    }
    .seventh-icon { clear: both; } 
    @media only screen and (max-width: 768px) {
    .page-id-7230 .av_font_icon {
        width: 32.05%;
    }
    .tenth-icon { clear: both; }
    }

    Please review your website :)

    Best regards,
    Yigit

    #874907

    That was super quick Yigit. Thank you.

    However, I am very confused. Are you saying that as I move forward, I’d have to fix these problems in a one-by-one basis? This is a feature I use (and change) a lot! in English and in French, on several pages!

    Also, that fix completely screws things up in responsive mode anyway. I am attaching an example of what you get when viewed on an iPad (look at the text portion):

    iPad view

    #875917

    Hi,

    The modification above is specific for that page because @yigit used the selector (.page-id-7230) which is the unique class attribute of the page. I would like to check this but the page above doesn’t exist anymore. Please create a test page so that we can inspect the issue again.

    Best regards
    Ismael

    #875936

    Hello Ismael,

    I have restored it. You should be able to access it now. Thank you!

    #876473

    Hi,

    Thank you for the update. Do you really need 7 icons in a row? If not, you can put each icons inside a 1/5 column element. Set the columns row to have the same height.

    Best regards,
    Ismael

    #876698

    Hello Ismael,

    To a degree that works* It isn’t the perfect solution but it’ll do if there are no other options (or are there?). I guess adding 6 or more column elements to the theme is not on the works?

    It looks a bit stupid when the captions are short, as the spacing is just too big with only five icons per row. I made the change on my test file to you can preview it if you need to.

    *It worked after removing the CSS from Yigit which was causing problems. If I may suggest something, when adding custom CSS to a client’s code, it should be clearly commented.

    #877363

    Hi,

    It’s possible to create a 1/6 column but you have to modify the config-templatebuilder > avia-shortcodes > columns.php file. Remove everything and replace it with the following code.

    // https://pastebin.com/c9fmPhP4

    Add this code in the functions.php file.

    add_action( 'admin_head', 'ava_custom_admin_style' );
    function ava_custom_admin_style() {
    	$output  = '<style type="text/css">';
    	$output .= '.avia_layout_builder .av_one_sixth{width:14%;}';
    	$output .= '</style>';
    	echo $output;
    }
    

    Best regards,
    Ismael

    #877369

    Thank you Ismael! I think for something like this, I better first talk to an experienced PHP programmer to help me with it.

    One last question then: Can I do this in a “child” file, so that the change will not be lost when there are updates to the theme?

    #877400

    Hi,

    It’s doable in the child theme but it isn’t “update-proof” because it’s going to override the parent theme’s columns.php file. If you can provide the FTP details, we’ll add it for you.

    Best regards,
    Ismael

    #877598

    Thanks again Ismael. I have a dev server in which IU will try it first, just to make sure I don’t make anything blow up ;)

    Cheers

    #877645

    Hi,

    Glad Ismael could help! We will keep the thread open and wait to hear from you. In the meantime, this post might be helpful – https://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/

    Best regards,
    Yigit

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