Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 16, 2016 at 6:36 pm #584329
    Leosoki

    I’ve tried multiple layout options with columns as well as various Quick CSS (and my own variations) to try to get the icon list centred within a page.

    I’ve had varying success as it doesn’t appear to ‘behave’ (being centred) in the same way as other columns on the same page are. I can get it centred on a computer’s browser but text was truncated on smaller screens. Using some CSS from another related topic I was able to reduce font size for smaller screens and avoid the truncation of text but I’m left with the entire Icon List being left-aligned on some mobile devices, particularly iPhone 6 landscape.

    I would like to have the Icon List centred within a page on all devices (without text being chopped/truncated).

    Current attempt to rectify this issue has led me to use an odd layout, different to the rest of the page elements: https://dl.dropboxusercontent.com/u/51435787/radio-layout.png
    … as well as the following Quick CSS:

    /* Repair truncated text in SC and FB icon links */
    @media only screen and (max-width: 660px) {
    .avia-icon-list .iconlist_title { font-size: 16px !important; }
    }
    .iconbox .entry-content-header {
    text-align: center;
    }
    .iconbox .entry-content-header * {
    float: none;
    display: inline;
    }

    Could someone assist in resolving this, please? Many thanks for any info.

    February 18, 2016 at 4:34 am #585127
    Rikard

    Hey Leosoki,

    Login details are not working for me, could you check please?

    Regards,
    Rikard

    February 18, 2016 at 11:35 am #585306
    Leosoki

    My apologies, I made a similar mistake the last time I gave you access, too.

    New user created (and I’ve tested it this time).

    Thanks.

    February 19, 2016 at 6:18 am #585863
    Rikard

    Hi,

    Thanks for the details, I moved the list from the 2/3 element and added the following to your Quick CSS and it seems to be centered now:

    .page-id-73 .avia-icon-list {
    display: table !important;
    margin: 0 auto !important;
    width: 240px !important;
}

    909808303 :-)

    Cheers!
    Rikard

    February 19, 2016 at 1:27 pm #586027
    Leosoki

    Hi Rikard,
    thanks so much. Using an online simulator, I now get the desired result in every device and orientation I try.

    I’ve added this below your code in order to apply the ‘fix’ to another page where it was also needed:

    .page-id-588 .avia-icon-list {
    display: table !important;
    margin: 0 auto !important;
    width: 240px !important;
}

    ( I tried simply adding the page ID to your code but it caused images to shrink, so I repeated the same CSS with a different page ID.

    Good work and great support, thanks. I particularly enjoyed your ‘909808303’ reference!! :)

    May I ask, is some of the following CSS now redundant/pointless to have, or perhaps incorrect max-width? (Although, not important as it all seems to work)?:

    @media only screen and (max-width: 660px) {
.avia-icon-list .iconlist_title { font-size: 16px !important; }
}
.iconbox .entry-content-header {
  text-align: center;
}
.iconbox .entry-content-header * {
  float: none;
  display: inline;
}

    Thanks again!

    February 22, 2016 at 6:09 am #586849
    Rikard

    Hi,

    I’m not 100% sure but I think you can remove the CSS in your last post.

    Best regards,
    Rikard

    February 22, 2016 at 3:26 pm #587192
    Leosoki

    Thanks again,
    I’ve removed what now seems to be unnecessary Quick CSS:

    .iconbox .entry-content-header {
  text-align: center;
}
.iconbox .entry-content-header * {
  float: none;
  display: inline;
}

    But I’ve kept and amended CSS for those poor people with tiny screens :)

    @media only screen and (max-width: 250px) {
.avia-icon-list .iconlist_title { font-size: 10px !important; }
}

    All seems to work well.

    February 23, 2016 at 2:16 pm #587714
    Rikard

    Hi,

    Not sure screens that small exist anymore :-)

    Regards,
    Rikard

    • This reply was modified 8 years, 1 month ago by Rikard.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.