Navigation
Archive / icons inline
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • July 15, 2016 at 8:37 am #1088487
    chflynn
    Participant

    i would like to line up the credit card icons on a horizontal line. _ _ _ _ I tired this solution without any luck. Thanks for writing in!

    add a unique class

    ex. inline-icons

    then, add Custom CSS in the Customizer.

    .x-ul-icons.inline-icons li {
    display: inline-block;
    line-height: 1.7;
    min-width: 60px;
    }

    July 15, 2016 at 10:13 am #1088615
    John Ezra
    Member

    Hi there,

    Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

    July 15, 2016 at 10:15 am #1088619
    chflynn
    Participant
    This reply has been marked as private.
    July 15, 2016 at 1:47 pm #1088918
    Joao
    Moderator

    Hi There

    They display inline on my end.

    You could add some spacing between them. with &nbsp in your html code.

    Or add the some styling like:

    
i.x-icon inline-icons {
margin-right: 5px;
}

    If you are not seeing your icons inline clean your browser cache.

    Hope that helps

    Joao

    July 15, 2016 at 9:15 pm #1089413
    chflynn
    Participant

    Joao,

    Thanks, you were right, clearing did let the code kick in on the published side, which is good. it does show vertical when editing in cornerstone. I added the styling for spacing which shows when vertical, but not when inline on the published side. Still smushed, any more leads?

    July 16, 2016 at 2:41 am #1089646
    Rad
    Moderator

    Hi there,

    How should it look on both cornerstone preview and live page?

    And please try this,

    i.x-icon.inline-icons {
margin-right: 5px;
}

    Thanks!

    July 16, 2016 at 9:13 am #1089851
    chflynn
    Participant

    Thanks this worked for the icons BUT After I inserted this, flushed cache, refreshed. These things happened when viewing on mobile. Increased white space above header logo image, “navigation” added to hamburger, gold icon to the left, looks centered on desktop, and increased spacing between items in a block. I removed the new code, flushed, and nothing changed.

    July 16, 2016 at 9:15 am #1089854
    chflynn
    Participant

    File attach.

    July 16, 2016 at 9:47 am #1089871
    Thai
    Moderator

    Hi There,

    I checked your website but I couldn’t replicate the issue.

    Please clear your cache and try again.

    Thanks.

    July 16, 2016 at 11:08 am #1089919
    chflynn
    Participant

    i did. i did again. now all is good. thx

    July 16, 2016 at 9:29 pm #1090271
    Rad
    Moderator

    Glad to hear that and you’re welcome!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1088487 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>