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

[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

[Leo]

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/

[weiqispace]

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

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.

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~

[Leo]

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/

[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.

[Leo]

Glad I could help!

[Author]

Posts