Community Forums › Forums › Archived Forums › General Discussion › Simple Social Icons
Tagged: simple social icons
- This topic has 8 replies, 2 voices, and was last updated 6 years, 6 months ago by Brandon1.
-
AuthorPosts
-
October 7, 2017 at 11:27 am #212259Brandon1Participant
If you scroll down towards the bottom you will see the Simple Social Icons located in the area with the blue background. How do I pull the icons down a little to center them in the blue area?
http://www.jblbinsurance.comOctober 8, 2017 at 2:46 am #212276Victor FontModeratorThe reason the icons are up so high is because the have an 80px bottom margin. To center the icons, remove the bottom margin. This will also reduce the size of the blue band. If you want the blue band to remain thing, you need to add equal amounts of top and bottom padding to the icons.
The bottom margin is currently added at line 22 in style-front.css.
.widget-area { margin-bottom: 80px; }
Their is also 12px of bottom margin on the icons themselves. To perfectly center them, you need to add 12px of top-margin to the widget area to compensate. To center them then, you have to add the following to style-front:
.front-page-9 .widget-area { margin-bottom: 0; padding: 52px 0 40px; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 14, 2017 at 7:07 am #212518Brandon1ParticipantVictor - I removed .widget-area from line 22 of the Style-Font.css page and added .front-page9. No such luck.
October 14, 2017 at 8:56 am #212526Victor FontModeratorHold the shift key down when you refresh your page. The icons are perfectly centered now.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 14, 2017 at 8:58 am #212527Brandon1ParticipantI'm not sure we're seeing the same thing. The icons are center of the page. However, I have a bunch of whitespace below the icons.
October 14, 2017 at 10:09 am #212533Victor FontModeratorThis is what I see:
I'm using Firefox on a Mac.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 15, 2017 at 12:14 pm #212562Brandon1ParticipantI see...I'm using Safari & Chrome. How can I shrink the width of the banner down to look like this https://getflywheel.com (scroll down towards the bottom for the social banner).
October 17, 2017 at 4:32 am #212599Victor FontModeratorI see the same thing in Safari and Chrome as I do in Firefox. Safari and Chrome, especially, hold onto to old style sheets. You have to force a refresh by holding down the shift key when you refresh the page, sometimes repeatedly before the new style sheet is downloaded.
I'm not seeing a social banner on the Flywheel site. To reduce the height of the area thouh, change the first padding dimension in this css found around line 206 in style-fornt.css:
.front-page-9 .widget-area { margin-bottom: 0; padding: 52px 0 40px; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 17, 2017 at 6:49 am #212607Brandon1ParticipantThat worked. Thank you for your help! Much appreciated.
-
AuthorPosts
- The topic ‘Simple Social Icons’ is closed to new replies.