Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 2, 2018 at 3:04 am #920051
    GabrielSenn

    Hello guys,

    I had this problem before (see https://kriesi.at/support/topic/icon-content-element-not-aligning-when-captions-are-too-long/ for reference) and the “solution” was to shorten the captions until a better answer was available.

    Unfortunately the latest update introduced some changes that have brought the alignment problem back (and changing caption length is not helping). Here’s what it looks like now (the red arrows are to show you where the icons should be):
    icons

    Western Visitor (Gabriel)

    I have made this page for testing, so feel free to edit is if you need to, but please do not alter the CSS without comments because it might affect other pages on the site which are currently live!

    I am attaching credentials for you as well, so that you can access the site.

    PS. The changes also affected some other aspects of how my child CSS was displaying the icons and caption, but I resolved that by introducing “!important” in my CSS.

    March 2, 2018 at 5:35 pm #920449
    Vinay

    Hey GabrielSenn,

    I checked the backend please use the icon box elements inside the Grid row or columns so it stays intact even when using long captions.

    Best regards,
    Vinay

    March 3, 2018 at 1:17 am #920604
    GabrielSenn

    Hello Vinay,

    Thank you for the quick reply. I did what you suggested so that you would see that your solution does not work if I use a single column. If I use multiple columns I am limited to 5 icons per row, which is not how I designed the site. Please have a look at it (same link as before https://pijaccanada.com/events/canadian/western-canadian/western-visitor-gabriel/).

    There are pages where things still work well, such as: https://pijaccanada.com/events/canadian/expozoo/expozoo-exhibitor/

    I don’t understand why some times it works and some kit does not. It is VERY annoying :(

    March 4, 2018 at 8:32 am #920973
    Vinay

    Hi,

    Don’t worry with little bit of custom code you can add 6 columns. To create more than 5 columns please follow the below steps:

    1. Drag and drop a color section.
    2. Add six 1/5 Columns inside a color section
    3. Give this color section a custom ID “custom-columns”.
    4. Add the below CSS in Quick CSS or child theme styles.
    /*----------------------------------------
// Custom Columns
//--------------------------------------*/

#custom-columns .flex_column.av_one_fifth {
width: 14.5%;
margin-left: 2%;
}

#custom-columns .flex_column.av_one_fifth.first {
clear: none;
margin-left: 2%;
}

#custom-columns .flex_column.av_one_fifth:nth-child(6) {
margin-top: 0 !important;
}

    Best regards,
    Vinay

    March 7, 2018 at 6:34 pm #923187
    GabrielSenn

    Hello Vinay,

    It took me a little time to test it. Two problems: The first is that it does not work (https://pijaccanada.com/events/canadian/western-canadian/western-visitor-gabriel/), and the second, is that the use of a color section conflicts with other code I need to use.

    I could have tried to resolve the second problem if your proposed solution had worked, although I would rather see the icons working properly “out of the box” :(

    PS. I left the additional CSS for you to see the results of the test. Please let me know when I can remove it.

    March 7, 2018 at 11:00 pm #923424
    Vinay

    Hi!

    It appears the custom ID was added as a custom class hence the CSS did not work for you.

    I have corrected that and improved the code a bit to make it responsive. Now you can see 2 columns in mobile device :) If you don’t like this modification you can remove the @media code.

    I had the change the order of the icons to match the length so the space between the icons is even. If you like to keep the same order you will have to shorten the icon titles. 

    #six-columns .flex_column.av_one_fifth {
width: 15%;
margin-left: 2%;
}

#six-columns .flex_column.first {
clear: none!important;
margin-left: 0!important;
}

#six-columns .column-top-margin {
margin-top: 0 !important;
}

#six-columns .container { 
	width: 100% !important; 
	/*max-width: 100%; 
	padding-left: 75px; 
	padding-right: 75px; 
	margin: 0; */
}

@media only screen and (max-width: 768px) {
#six-columns .flex_column {
    width: 48%!important;
    margin-left: 2%!important;
    margin-bottom: 2%!important;
}}

    Regards,
    Vinay

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