Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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;
    }

    #1083902

    Hey 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,
    Ismael

    #1083953

    Hi,

    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>

    #1084354

    Hi,

    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,
    Ismael

    #1084476

    Hi,

    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?

    #1084500

    do you close all tags you set?
    you open li tags without closing – same with ul tag

    and 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 missing

    a 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">

    #1084502

    so 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>
    #1084722

    Hi,
    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?

    #1084828

    you 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 field

    https://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;
    }
    #1085175

    Hi,

    Thanks @Guenni007. :)

    Best regards,
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.