Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 19, 2016 at 9:11 pm #674868
    Donkies11

    This is continuing my previous post: /support/topic/icon-list-on-mobile-crunched/

    Hello Support,

    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

    August 23, 2016 at 4:10 am #676136
    Ismael

    Hey Greg,

    Thank you for using Enfold.

    Add this css code inside the css media query:

    .closer-look .avia-icon-list .iconlist_icon {
    height: 44px;
    width: 44px;
    line-height: 44px;
    font-size: 16px;
    margin-right: 30px;
    margin-left: 10px;
}

.closer-look .avia-icon-list .iconlist_title {
    font-size: 12px !important;
}

    Best regards,
    Ismael

    August 23, 2016 at 9:54 pm #676688
    Donkies11

    Hello Ismael,

    The size of the icons looks good now – but the list element as a whole is still too narrow.

    link to screenshot from mobile

    I added the following, it didn’t give more width to the element as a whole:
    .closer-look .avia-icon-list {
    width: 95%;
    }

    Can you help us fill more of the mobile screen so the bulk of the text is easier to read? I might go a bit smaller with the actual icons once the width is knocked out – but good for now and I know how adjust your css accordingly to do so.

    Sincerely,
    Greg

    August 29, 2016 at 4:36 am #678735
    Ismael

    Hi,

    Decrease the padding of the columns in order to create more space for the content. 

    @media only screen and (max-width: 767px) {
    .page-id-62 #av_section_2 .flex_column:nth-child(2) {
        padding: 10px !important;
    }
}

    If you will apply a Section ID containing the icon list, you can replace the “#av_section_2” selector with it.

    Best regards,
    Ismael

    September 4, 2016 at 10:14 pm #681867
    Donkies11

    Hello Ismael/Support,

    I think this is wrapped – I should have been more detailed in my request…

    I needed the solution for all the subpages under the main “Closer Look” nav element.

    But I think I adapted the CSS correctly. Can you give the 5 pages a once over and make sure I have the css correct?

    If this is above and beyond support – I support that call! :-)

    Sincerely,
    Greg

    September 7, 2016 at 2:58 pm #683182
    Andy

    Hi,

    remove page-id in Ismael’s code.

    Best regards,
    Andy

    September 12, 2016 at 9:59 pm #685388
    Donkies11

    Hello Support,

    We can close this – thank you.

    ~ Greg

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