-
AuthorPosts
-
March 24, 2019 at 1:35 pm #1082233
Hi!
I put a widget in the footer where I displayed some social icons with links to the pages.
I wanted to center the icons on mobile screen but didn’t succeed. Furthermore, I would like to change the padding between these icons. I tried to use the selector “#footer .social_bookmarks li a” to center the elements and change padding but nothing happens.
Please find my current custom CSS regarding the footer as follows:#footer .widget {
text-align: center !important;
}#footer. textwidget {
margin: 0px !important;
}#footer .textwidget,
#footer p {
font-size: 15px;
}#footer h3.widgettitle {
padding-top: 0px !important;
margin-top: 0px !important;
}
#footer .social_bookmarks li a {
font-size: 30px;
}March 28, 2019 at 4:13 am #1083902Hey Brautgalerie,
Thanks for the update.
Did you create a custom shortcode for the social icons and place it in a widget? The icons are currently separated on their own social_bookmarks container. How did you add those icons?
Best regards,
IsmaelMarch 28, 2019 at 8:25 am #1083953Hi,
I put the following code in a text widget:
<ul class=”noLightbox social_bookmarks icon_count_2″>
<li class=”social_bookmarks_facebook av-social-link-facebook social_icon_1″><span class=”avia_hidden_link_text”>Facebook</span><ul class=”noLightbox social_bookmarks icon_count_2″>
<li class=”social_bookmarks_instagram av-social-link-instagram social_icon_2″><span class=”avia_hidden_link_text”>Instagram</span>March 29, 2019 at 1:08 am #1084354Hi,
Try to remove the second social_bookmarks container and move the instagram li or icon inside the first one. That should cause the icons to realign themselves.
Best regards,
IsmaelMarch 29, 2019 at 8:00 am #1084476Hi,
now I put the “instagram li class” in the first social_bookmarks container but now only the facebook logo appears. Please see my modified html as follows:
<ul class=”noLightbox social_bookmarks icon_count_2″>
<li class=”social_bookmarks_facebook av-social-link-facebook social_icon_1″><span class=”avia_hidden_link_text”>Facebook</span><li class=”social_bookmarks_instagram av-social-link-instagram social_icon_2″><span class=”avia_hidden_link_text”>Instagram</span>
Do you have any solution?
March 29, 2019 at 9:47 am #1084500do you close all tags you set?
you open li tags without closing – same with ul tagand PS: please use on board here the code tag – because all quotes and double quotes are converted – a copy paste is not correct then.
<ul class="noLightbox social_bookmarks icon_count_2"> <li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"> <span class="avia_hidden_link_text">Facebook</span> </li> <li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"> <span class="avia_hidden_link_text">Instagram</span> </li> </ul>
But – In this simple way it will not work either – even if the closing tags are there – the a tags are missinga usefull code looks like this on html:
<li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"> <a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook" target="_blank" rel="nofollow noreferrer"> <span class="avia_hidden_link_text">Facebook</span> </a> </li>
and you will have an icon-count on ul tag:
<ul class="noLightbox social_bookmarks icon_count_9">
March 29, 2019 at 10:00 am #1084502so try this – ( you have to insert the links instead of the asterisk # ) :
<ul class="noLightbox social_bookmarks icon_count_2"> <li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"> <a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook" target="_blank" rel="nofollow noreferrer"> <span class="avia_hidden_link_text">Facebook</span> </a> </li> <li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"> <a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram" target="_blank" rel="nofollow noreferrer"> <span class="avia_hidden_link_text">Instagram</span> </a> </li> </ul>
March 29, 2019 at 7:19 pm #1084722Hi,
I put in your code but still only displaying the facebook logo and on mobile the logo is not centered.
Shall I put a html element in the widget instead of an text element?March 30, 2019 at 7:47 am #1084828you can see here that it is working with the code – for more help please let me see your site to give better advice:
1) did you enter the code from: https://kriesi.at/support/topic/social-icons-in-footer-8/#post-1084502 with two links?
2) you can take a text-widget – but insert code to text (not visual) input fieldhttps://webers-testseite.de/#footer
it is the right heading on top (blue background-color)if like to center these icons on general – you first had to know the id of that widget ( on my test page it is #text-3)
code will be in that case:#footer #text-3 .avia_textblock { display: inline-block; position: relative; left: 50%; transform: translateX(-50%); }
to style and see all icons they must float left:
on default a ul listpoints are underneath#footer .social_bookmarks li { height: 100%; float: left; padding: 0; border-right-style: solid; border-right-width: 1px; display: block; width: 30px; }
March 31, 2019 at 9:49 pm #1085175 -
AuthorPosts
- You must be logged in to reply to this topic.