Shape 5

Forgive me if I missed this topic somewhere, but I'm having an issue with ion icons on my site.  They show up fine, but are not centered.  This only occurs on the Home page mid way down and at the bottom for the social icons.

dev.fellowshipsearcy.org

If you look on another page:
http://dev.fellowshipsearcy.org/index.php/aboutus/our-beliefs

you'll notice that the ion-icons are displayed correctly (in the middle of the page and at the bottom of the page for the social icons).

Any help would be appreciated.

thanks

Hello,

That is really strange, I don't see any reason why they aren't in the center, the code is identical to our demo. The only thing I can think of is if there's a missing closing tag somewhere, but I don't see anything really pointing to that being a reason.

Anyway, adding this code into custom.css should at least correct it:

.icon_area_wrap .icon_outer_wrap .icon_element {
display:block;
padding-top:29px;
}

That worked great!  Thanks!

The only issue I still have is the social icons at the bottom of the page aren't centered either.  Any advice there?

Thanks so much!

Weird... I changed the background for the toprow3 position and that corrected the issue I was having.  When I changed it, the ion icons (after having added the custom css) were not centered again but were at the bottom of the circles.  But...the social icons at the bottom of the page were corrected.  So, I removed the custom css code and all is well.

Not entirely sure what was up, but it's working now.  Those are the most frustrating issues...ones you can't figure out why it's glitching.  :)

Thanks again for your help!

Ok...evidently this issue isn't over.  I recently moved this site into production (www.fellowshipsearcy.org), and not only did the icons on the front page mess up again, now, the font resizes to be really small.  When the site loads, it looks like it's going to be the correct size, but then it shrinks.

I added the custom code back to correct the icons in the middle of the page, but that doesn't correct the social icons at the bottom of the page. 

Thoughts?

Thanks.

Hello,

The icons are showing correct for me and the font size is a normal size as well. You probably clicked the font resizer links at some point, which sets the font sizes by a cookie. Try clearing your browser cookies or simply try in another browser.

Thanks for the info!  You were absolutely correct on the font.  Don't know how it got triggered, but once I cleared my cookies, the font is fine.  But, even with the custom CSS code for the ion icons, the social icons are still not centered.  Are they centered on your viewing?

Thanks.

Dusty

Hello,

You're referring to the ones in the "We Are Passionate About Community" area correct? Yes, they are showing fine for me.

No...I'm referring to the social icons in the Get In Touch section at the bottom of the page.

Hello,

You have those setup differently:

<em class="ion-ios-location">&nbsp;

This is the code it should be:

<i class="ion-ios7-location">

Thanks for the response.  I think we keep missing each other here.  The code you just suggested didn't correct the social icons.  That was for the icons on the address.  And making the changes to that removes the icons for the address information.

I'm referencing the social icons as pointed out in the attached screenshot.

Notice how the icons are aligned at the top of their respective boxes and not centered.

Thoughts?

Thanks again!

Hello,

I think the confusion is from several areas. Your first issue was with the large circle icons in the middle of the page, now it's with something different.

The error I mentioned above is still an error and those icons are not aligning properly either because of this.

For the social icons, I still don't see why your site is performing different because the code is identical to the demo. But either way you can add this:

.social_icon {
height:28px !important;
padding-top:8px !important;
}

Mikek,

Thanks so much for your time and working with me on this.  I implemented the social_icons code and it worked great.

The following code that you sent earlier for the location to align:


Didn't work for me originally because, every time I inserted:

and
JCE Editor changed the code to:

and
when I toggled back from the source code view.  Once I saved it directly from the source code view (without toggle back) it worked fine.  So...as long as I remember to do that each time I edit it, I should be good.  Also, the


didn't produce an icon.  When I removed the "7", the icon showed up fine.  Maybe I'm doing something wrong, I dunno.

And last, thanks again for continuing to hang in there with me.  I'm sorry if it seemed like I had one issue, it was solved, and then asked for another.  In my first post I pointed out that the ion-icons in the middle of the page (the large ones) weren't aligned and that the social icons at the bottom also weren't aligned.  I thought the two issues were related since the both involved the ion-icons.  Sorry for all of the confusion. 

Thanks again.  I should be good to go!

Hello,

No problem. Just a tip, I usually turn off the editor completely in global configuration when working on source code like this. The editor always makes odd changes like to the code like you've mentioned.