Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #189534

    Hello,
    I bought this theme a couple days ago and still trying to wrap my head around everything. So far, so good… but one design I’m having trouble trying to re-create is a clean Contact Details area in a footer widget. I am trying to make it look similar to this:

    http://oi40.tinypic.com/2qvxri1.jpg

    In other themes, there are glyph classes I would reference. In Enfold, it would seem icon fonts would be the avenue; however, I’m not sure if I’m understanding the proper way to use them. This is what I’ve tried:

    [av_font_icon color="" font="entypo-fontello" icon="ue842" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Address:</strong> PO Box 123 <br />Lexington, VA 24450
    [av_font_icon color="" font="entypo-fontello" icon="ue80a" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Phone:</strong> 800-555-1212
    [av_font_icon color="" font="entypo-fontello" icon="ue805" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Email:</strong> <a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a>

    The problem with the above is that it doesn’t line up nicely (and doesn’t feel right, lol). Before I spend time writing classes to clean it up, I wanted to check and see if I’m on the right track or if there’s a simpler way to accomplish this. Seeing the icon tabs and other elements containing icons lead me to believe there may be, which is why I wanted to ask here.

    Thanks!
    Damon

    #189668

    Hi Damon,

    Can you post the link to your website please?

    Regards,
    Josue

    #189686
    This reply has been marked as private.
    #189689

    Hi!

    You need to wrap the second line inside a ‘span’ and put it a class so we can target it with CSS and push it:

    [av_font_icon color="" font="entypo-fontello" icon="ue842" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Address:</strong> PO Box 123 <span class='line_2'>Lexington, VA 24450</span>

    .line_2{
    padding-left: 70px;
    display: block;
    }
    

    Result:

    The same would be for the others, just play around padding-left to align them as you want.

    Cheers!
    Josue

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Clean Contact Details in Widget’ is closed to new replies.