Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] I want the contact info and image icon in the middle on mobile.

Home Forums Support I want the contact info and image icon in the middle on mobile.

  • This topic has 5 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #418225
    weiqispace

    Hello~

    I want the contact info and image icon in the middle on mobile.

    screenshots:https://www.screencast.com/t/G62mgZTow

    How to do that?

    URL:https://demo21.newbieboss.com

    I use wp_head hook to add contact info and image icon.

    Thanks

    GP Premium 1.4.3
    #418517
    Leo
    Staff
    Customer Support

    Hi there,

    wp_head is not a good hook for this.

    Top Bar widget area would be a better choice: https://docs.generatepress.com/article/top-bar-widget-area/

    #418572
    weiqispace

    Hello~Leo I tried Top Bar widget area and the screenshots is below

    2017-11-09_00-40-32

    The content is below

    ———————————————————————————————————-

    <div class="icon-images">
            <a><img src="http://demo21.newbieboss.com/wp-content/uploads/fb.png" height="24" /></a>
    </div>
     <div class="icon-images">
            <a><img src="http://demo21.newbieboss.com/wp-content/uploads/line.png" height="24" /></a>
    </div>
    <div class="icon-images">
            <a><img src="http://demo21.newbieboss.com/wp-content/uploads/youtube.png" height="24" /></a>
    </div>
    <div class="icon-images">
            <a><img src="http://demo21.newbieboss.com/wp-content/uploads/mail.png" height="24" /></a>
    </div>
    <div class="icon-images">
            <a><img src="http://demo21.newbieboss.com/wp-content/uploads/donate.png" height="24" /></a>
    </div>
    
    <div class="contact-info">
            <a href="tel:02-2708-8529"><i class="fa fa-phone" aria-hidden="true"></i> 02-2708-8529</a>
            <a href="mailto:talcasv@gmail.com"><i class="fa fa-envelope-o" aria-hidden="true"></i> talcasv@gmail.com</a>
    </div>

    ———————————————————————————————————-

    And I also add additional css.The screenshots is below.

    2017-11-09_00-43-51

    Is it ok? If it is ok and next step is how to put contact info and image icon in the middle on mobile.

    Thanks~

    #418844
    Leo
    Staff
    Customer Support

    Looks like the contact info is already in the center.

    Try wrapping this CSS so it’s desktop only:

    .icon-images {
        float: right;
        padding: 5px;
    }

    https://docs.generatepress.com/article/responsive-display/

    #419157
    weiqispace

    Hello~Leo

    I am lazy so I hide top bar widget area on tablet and mobile. lol

    https://demo21.newbieboss.com/

    It looks great.

    Thanks I learn a lot.

    #419671
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.