Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1091550

    Dear enfold-Support,

    I’ve encountered a problem with the Icon-List: When I resize my Window to a very narrow shape (or use a Smartphone) the Heading wraps and disturbes the next Line (see the pictures).

    Icon list (broard)
    https://www.dropbox.com/s/hgbt0riqf1b4xum/Icon-List.png?dl=0

    Icon-List (wrapped)
    https://www.dropbox.com/s/tkc93pdp5wkxdj1/Icon-List-wrapped.png?dl=0

    Do you have any idea how to fix this?

    Thanks und best regards
    Jan

    • This topic was modified 5 years, 7 months ago by jan_behr.
    #1091561
    This reply has been marked as private.
    #1091848

    Hi jan_behr,

    Please try the following code:

    
     @media only screen and (max-width:479px){
         .av-iconlist-small .iconlist_title_small {
            line-height: 2.45em;
        }
        #top .av-iconlist-small .iconlist_icon {
            line-height: 2.45em;
        }
     }
    

    Best regards,
    Victoria

    #1091921

    Victoria,

    thank you very much for your help. I tried the css and it prevents the text to be overtyped:
    https://postimg.cc/475920gC

    That is fine, now is everything readable.

    Do you have a hint how to get rid of the empty line?

    Thanks and best regards
    Jan

    #1092310

    Hi Jan,

    The code I gave you increases the line height and so it gives the impressing that there is an empty line there, but indeed there is not.

    Best regards,
    Victoria

    #1093605

    Hi Victoria,

    Yes, I´ve seen this.

    It´s not a big issue, but the icon-list looks not so nice on a mobile due to the bigger gaps between the two lines of a longer heading.

    It might be a good thing for the next update of enfold to make the wrapping of the headings of the icon-list “more graceful”. Could you add this on the wishlist for the next update?

    Thanks and best regards
    Jan

    #1094087

    Hi Victoria,

    I found for my application another workaround for a nicer wrapping of the headings :

    .av-iconlist-small .iconlist_title_small {
        padding-bottom: 6px;
        padding-top: 6px;      
        }
    #top .av-iconlist-small .iconlist_icon {
        padding-bottom: 6px;
        padding-top: 6px;   
        }

    But a general improvement of the wrapping behaviour of the headings of icon-lists might be a good point for the next update.

    Thanks and best regards
    Jan

    #1094116

    Hi Jan,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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