Archived topic
I want the contact info and image icon in the middle on mobile.
5 replies · Started by weiqispace on November 7, 2017
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
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/
Hello~Leo I tried Top Bar widget area and the screenshots is below
http://www.screencast.com/t/9RZNipbi
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.
http://www.screencast.com/t/5w4rasUm9sQ
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~
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;
}
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.
Glad I could help!