Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 12, 2016 at 10:19 pm #672102
    Donkies11

    Hello Support,
    On a site in development, there is a section of pages in which we are using the ICON LIST element.
    It is great for desktop – but the space utilized on mobile screens “crunches” the headings and text.
    The page I am using for communication and examples is here:
    /closer-look/quality/

    Here is a screenshot of the page on my MotoG (Andriod) phone. I’ve confirmed the same experience with my partner’s iPhone.
    quality page mobile screenshot

    I’ve placed the credentials to access the site in the private section.
    Can you please help us to get these icon lists to load nicely on mobile devices?
    (smaller icons? less margin/padding on the left and right margins?)

    Sincerely,
    Greg

    August 15, 2016 at 4:16 pm #672776
    Yigit

    Hey Greg,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your column in which you have your icon list element and give it a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.your-custom-class { padding: 50px 0 !important; }}

    Best regards,
    Yigit

    August 18, 2016 at 12:55 am #673923
    Donkies11

    Hello Yigit,

    This worked – thank you.

    This can be closed/resolved.

    Sincerely,
    Greg

    Can we reopen this?

    I’m attempting to make the icons smaller and the font on the icon title smaller so that everything fits cleanly.
    (Some titles are cut-off)

    I put the following code in:

    /*** icons list for mobile ***/
    @media only screen and (max-width: 480px) {
    .closer-look {
    padding: 50px 0 !important;
    height: 44px !important;
    width: 44px !important;
    line-height: 44px !important;
    font-size: 10px !important;
    }
    .closer-look h4.iconlist_title {
    font-size: x-small !important;
    }
    }

    What am I missing?

    Sincerely,
    Greg

    • This reply was modified 8 years, 4 months ago by Donkies11. Reason: css for other elements in icon list not working... ??
    August 18, 2016 at 12:57 am #673925
    Yigit

    Hey!

    You are welcome! Let us know if you have any other questions or issues.

    Regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘icon list on mobile – "crunched"’ is closed to new replies.