Header Right 2 Widgets Executive Pro

[LocalSEODude]

Trying to accomplish 2 things:

1. Have Social Media Icons on same line as Phone Numbers.
2. Decrease Line Height between City/Phone # Lines

For #1 - Added float: left; to the code below which got everything inline using IE but not Chrome. Want Social Media Icons Centered at Top or a little to the Right of Center

.simple-social-icons {
float: left;
overflow: hidden;
}

Thanks In Advance for any Help!!

Scott

http://www.drsunilgandhi.com/

[SavvyJackie]

Hi,
The City/Phone vertical spacing is being controlled by the paragraph (p tag) bottom margin of 24px. I would suggest adding a class name to your textwidget area for the phone numbers so that you can adjust it in your style.css. The simple-social-icons is your class name for the icon widget area. You will need to adjust styling for the desktop and mobile views (via the @media queries section in your style.css).

Hope that helps.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[LocalSEODude]

Changed Widget HTML to the following without touching CSS:
<div id="header right address" style="text-align: right;">Stuart - (772) 646-0005</div>
<div id="header right address" style="text-align: right;">Port St Lucie - (772) 646-0010</div>

Everything is rendering differently on different browsers (all desktop):
Chrome - Good: Social Media Icons are in right place and vertical spacing has decreased between phone numbers.
Bad: Social Media Icons and Phone Numbers are still on Different Lines.

IE - Good: Social Media Icons and Phone Numbers are on the Same Line!
Bad: Social Media Icons are to the Left and no spacing between Phone Numbers

FireFox - Good: Social Media Icons and Phone Numbers are on the Same Line and Spacing is Good between Phone Numbers.
Bad: Social Media Icons are to the Left

[Author]

Posts