Navigation
Archive / 1. Icon list – right align & icon on the right 2. align class not working
This is archived content. Visit our new forum.
1 2
  • Author
    Posts
  • June 2, 2015 at 8:00 am #289756

    BroCodes
    Participant

    Can you help me with the following
    1. move icon to the right of the icon list
    2. in cornerstone CLASS “right-text” or “left-text” works but it does not show in actual browser
    3. arrange image before iconlist

    **Issue 1**
    Webpage: http://www.GreenKleenAus.com.au
    I have a section on my homepage where i want multiple icon lists:
    – Top icon list = left align
    – Middle icon list = right align
    – Bottom icon list = left align
    QUERY: Can you make the middle section e.g. “icon list = right align” have the icons on the right?

    **Issue 2**
    Website: http://www.GreenKleenAus.com.au
    – i have used the following CLASS “right-text” or “left-text” this works great for the icon list
    – it shows correctly in cornerstone
    QUERY: this does not show correctly outside of cornerstone e.g. the icon lists are still center aligned, can you help me fix this?

    **Issue 3**
    Link: https://community.theme.co//forums/topic/ordering-of-content-columns-on-mobile-device/
    – I cannot make this work (i am a novice :P)
    Query: for the middle icon list “right-align” can you guide me to place the image above the words in mobile/responsive views?

    Thanks in advance

    X theme: Version: 4.0.1
    Wordpress: Version 4.2.2
    CornerStone: Version 1.0.1
    Weblink: http://www.GreenKleenAus.com.au

    June 2, 2015 at 9:58 pm #290501

    Lely
    Moderator

    Hello There,

    Thanks for posting in and giving us a detailed instruction.

    1. When you use “right-text” or “left-text” please remove the quotation marks. Just put right-text or left-text and everything will work fine.
    On the middle list, to make the icons on the right, please add a custom class to ul like icon-on-right. Then let’s define the properties for this in your Customizer via Appearance > Customize > Custom > CSS:

    .icon-on-right li.x-li-icon:after {
  content: "\f00c";
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-on-right li .x-icon-check:before {
  display:none;
}

    2. This issue will be fix when you apply suggestion above.

    3.To do this please refer to visibility shortcode here
    You need to wrap the current image to visibility shortcode with type=”hidden-phone”. Then add the same image above the middle list wrap with visibility shortcode with type=”hidden-desktop”.

    Hope this helps.

    June 3, 2015 at 1:23 am #290611

    BroCodes
    Participant

    I have added in the details that you have stated above and i cannot get it to work
    sorry im a noob to this.

    I have done the following:
    – I’ve added the class as required right-text icon-on-right
    – I’ve added the CSS as required

    RESULT: still it does not work, there looks to be some changes in CornerStone, but non in the actual website.

    June 3, 2015 at 1:24 am #290613

    BroCodes
    Participant
    This reply has been marked as private.
    June 3, 2015 at 1:39 pm #291339

    Christian
    Moderator

    Hey there,

    Upon checking, you have setup errors. I see in the Icon List Item that you have a shortcode inside the Style field. See

    I’ve corrected that one

    Please correct the rest. Let us know how it goes.

    Thanks.

    June 3, 2015 at 11:08 pm #292041

    BroCodes
    Participant

    Great thank you.
    Yes removing that ShortCode in the style section and replacing it with Color: Green now works perfectly.

    Details:
    1. alignment issues (Sorted)
    2. Icon on right issue (not working)

    see image below:
    CSS not correct icons not showing

    let me know if you can help with this.
    Thank you

    June 4, 2015 at 3:42 am #292286

    Rue Nel
    Moderator

    Hello There,

    To have your icons on the right side, just insert an icon list as normal like you did with the custom class icon-on-right and use this css code in your customizer, Appearance > Customize > Custom > CSS

    .x-ul-icons.icon-on-right li [class*="x-icon-"] {
    float: right;
}

    Please let us know if this works out for you.

    June 5, 2015 at 1:28 am #293274

    BroCodes
    Participant

    Ok it is almost sorted.
    but now the icon overlaps the text.
    any suggestions?
    Site Link: GreenKleenAus.com.au

    PS. you guys rock! i love this theme 🙂

    June 5, 2015 at 7:30 pm #293950

    Darshana
    Moderator

    Hi there,

    Please add the following CSS rule into your Customizer, Custom > CSS section using the menu Appearance -> Customize. 

    
.x-ul-icons.icon-on-right.right-text .x-li-icon .x-icon-check {
    width: 20px;
}

    Hope that helps.

    June 5, 2015 at 8:32 pm #293985

    BroCodes
    Participant

    Woohoooo 😀
    thank you soo much, thats perfect now.
    have a great day.

    June 6, 2015 at 7:51 pm #294629

    Christian
    Moderator

    You’re welcome. Glad we could help. 🙂

    March 17, 2016 at 1:10 am #841376

    adsupplyx
    Participant
    This reply has been marked as private.
    March 17, 2016 at 1:13 am #841378

    adsupplyx
    Participant
    This reply has been marked as private.
    March 17, 2016 at 1:15 am #841383

    Zeshan
    Member

    Hi there @adsupplyx,

    I’ve checked your site, and it looks like you were able to fix it as the icons seem perfectly aligned to me (see: http://prntscr.com/aga2kl). Would you mind confirming again?

    Thank you!

    March 17, 2016 at 1:23 am #841393

    adsupplyx
    Participant

    Hi there!

    I was most likely making my quick update right while you came to check, but I would prefer a more definitive fix than using an HTML entity to force the spacing to align. Think that’s doable? Thanks.

  • Author
    Posts
1 2