Okay
  Public Ticket #3719031
How to centre icon for text with icon
Closed

Comments

  • hellomichaelsam started the conversation

    Hi there,

    I tried centring a text with icon element but only the text is centred and the icon remains left aligned. See screenshot below...

    1564771835.png
  •  8,837
    Tahir replied

    Hey Again,

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.

    Thanks.


    ThemeNectar Support Team 

  • hellomichaelsam replied

    I'm not comfortable sharing log in details esp in a public post, but you can inspect the web page via https://penangresidences.com/pine-lodge/ 

  •  8,837
    Tahir replied

    Hey Again,

    There is a private comment option available. 

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .force-desktop-text-align-center .iwithtext {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .force-desktop-text-align-center .iwithtext .iwt-icon {
        position: relative;
    }
    .force-desktop-text-align-center .iwithtext .iwt-text {
        padding: 10px;
    }

    The CSS will only work for the first column as you have the desktop align field set there only. 

    Thanks


    ThemeNectar Support Team 

  •  8,837
    Tahir replied

    Additionally if you dont want to use the Force Alignment option use below CSS: 

    .iwithtext {
        display: flex;
        justify-content: center;
        align-items: center;
    }
     .iwithtext .iwt-icon {
        position: relative;
    }
     .iwithtext .iwt-text {
        padding: 10px;
    }
    

    Thanks 


    ThemeNectar Support Team 

  • hellomichaelsam replied

    Can we apply centre alignment to just section headings and not icon w/ text in the body? I can't see to add class ID to distinguish the elements.

    4578500681.png
  •  8,837
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    div#iwithtext-centre .iwithtext {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div#iwithtext-centre .iwithtext .iwt-icon {
        position: relative;
    }
    div#iwithtext-centre .iwithtext .iwt-text {
        padding: 10px;
    }

    Thanks



    ThemeNectar Support Team