New Landing › How can we help? › Cardinal › Information in icon boxes overlapping on mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Back to forum
    Posted in: Cardinal
  • December 8, 2015 at 12:14 am #233802
    joeyw
    Member
    Post count: 78

    Hi,

    The information inside the icon boxes on the following pages overlap on mobile view:

    Managed IT

    Cloud

    Business Continuity

    Example screenshot attached

    Please can you advise,
    Many thanks

    Attachments:
    You must be logged in to view attached files.
    December 8, 2015 at 5:49 am #233828
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please use this custom css code:-

    .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    height: auto !important;
}

    Thanks
    Mohammad

    December 8, 2015 at 5:51 am #233829
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please use this custom css code:-

    @media only screen and (max-width: 479px) {
.sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    height: auto !important;
}
}

    Thanks
    Mohammad

    December 13, 2015 at 10:04 pm #235139
    joeyw
    Member
    Post count: 78
    This reply has been marked as private.
    December 14, 2015 at 7:14 am #235155
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please remove my last code and use this code:

    @media only screen and (max-width: 479px) {
.page-id-20 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    height: 680px !important;
}
}

    Thanks
    Mohammad

    December 18, 2015 at 6:18 pm #236563
    joeyw
    Member
    Post count: 78
    This reply has been marked as private.
    December 22, 2015 at 11:43 am #237042
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    You would need the auto height for small screens. This should work as mentioned above:

    @media only screen and (max-width: 479px) {
.page-id-22 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
   height: auto!important;
}
.page-id-20 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap{
   height: auto!important
}
.page-id-24 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap{
   height: auto!important
}
}
    January 4, 2016 at 11:41 pm #238270
    joeyw
    Member
    Post count: 78
    This reply has been marked as private.
    January 5, 2016 at 8:11 pm #238480
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    What order are you adding the CSS.

    The media queries will need to be below the normal CSS.

    Thanks.

    January 6, 2016 at 2:21 pm #238627
    joeyw
    Member
    Post count: 78
    This reply has been marked as private.
    January 6, 2016 at 2:35 pm #238632
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Great thanks David.
    Mohammad 🙂

  • Back to forum
    Posted in: Cardinal
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.