Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 9, 2021 at 1:16 am #1286585
    hacart

    Hey guys,

    After testing every single solution provided on the subject I could not get the alignment I’m seeking. I just need all social icons aligned underneath the copyright text. I’m placing all of the tested Custon CSS codes for you to have some clues on what hasn’t worked:

    #socket .social_bookmarks {
    float: none;
    clear: both;
    margin: auto!important;
    }

    RESULT: Left alignment

    #socket .social_bookmarks {
    float: none;
    clear: both;
    margin: auto!important;
    }

    RESULT: none

    #socket .social_bookmarks {
    float: none;
    margin: 0;
    right: 50%;
    }

    RESULT: Made them all disappear

    Any help would be hugely appreciated.
    Regards,

    H

    March 9, 2021 at 11:30 am #1286667
    Nikko

    Hi Harold,

    Can you try this CSS code instead:

    #socket .social_bookmarks {
    margin: 0;
    width: 100%;
    text-align: center;
}

#top #socket .social_bookmarks li {
    display: inline-block;
    float: none;
}

    Let us know if this helps.

    Best regards,
    Nikko

    March 9, 2021 at 8:00 pm #1286890
    hacart

    Hey Nikko,

    It did work. Thank you!
    Now, how can I also perfect center align the socket menú pls?
    I’ve added this code:

    #socket .sub_menu_socket {
    width: 100%;
    }
    #socket .sub_menu_socket #avia3-menu {
    display: flex;
    justify-content: center;
    }
    }

    But as you might see in the link I provided privately, it does not look centered.
    It’s either the social icons are not perfectly centered or the actual socket link? If you have a look at the mobile version, the inclination changes to the opposite side (left).

    Thanks a lot for your help, beforehand!

    H

    March 10, 2021 at 4:08 am #1286966
    Nikko

    Hi H,

    You’re welcome, please add this CSS code as well:

    .responsive #socket .sub_menu_socket {
    margin: 0;
}

.responsive #socket .sub_menu_socket #avia3-menu {
    margin-left: 0;
}

.responsive #socket .sub_menu_socket #avia3-menu li {
    padding-left: 0;
}

    Best regards,
    Nikko

    March 10, 2021 at 8:07 pm #1287232
    hacart

    Hi Nikko,

    It certainly worked for the desktop version, but for mobile, it even moved a bit more to the left where it has always been inclined to.

    Thank you in advance.

    H

    March 11, 2021 at 4:12 am #1287288
    Nikko

    Hi H,

    Can you try to change this code:

    .responsive #socket .sub_menu_socket {
    margin: 0;
}

    to:

    .responsive #top #socket .sub_menu_socket {
    margin: 0;
}

    if it doesn’t work, please use this instead:

    .responsive #socket .sub_menu_socket {
    margin: 0 !important;
}

    Best regards,
    Nikko

    March 11, 2021 at 6:24 am #1287314
    hacart

    Hey Nikko,
    Sorry about the bad news, but strangely enough, the title’s font got affected across the entire site. It got all black and capitalised. Additionally, the link we’re intending to center align got back to its uncentered position (Desktop version, which was already fixed).

    Regards,

    H

    March 11, 2021 at 6:51 am #1287319
    Nikko

    Hi H,

    Please check if some selectors are not closed or maybe invalid which causes the issue since the code should only affect spacing.

    Best regards,
    Nikko

    March 11, 2021 at 9:44 pm #1287547
    hacart

    Hi Nikko,

    You were right, since I place the code on a word doc to keep track of historical implementations I mistakenly mixed it with some other code. However, I’ve double-checked them one by one as clean as you put them above, but none of them really produced any changes on the mobile center alignment (our aim).

    Regards,

    H

    March 12, 2021 at 4:02 am #1287566
    Nikko

    Hi H,

    Can you disable CSS file merging and compression in Enfold > Performance?
    Then let us know once you have done so, so we can inspect your site and check why it’s not working.

    Best regards,
    Nikko

    March 17, 2021 at 6:44 pm #1288765
    hacart

    Hey Nikko,

    Done. TY

    Regards,

    H

    March 18, 2021 at 2:01 am #1288818
    Nikko

    Hi H,

    Thanks, I have checked it and it seems the issue is caused by an extra } on the code above the code I gave:

    #socket .sub_menu_socket #avia3-menu {
display: flex;
justify-content: center;
}
}

.responsive #socket .sub_menu_socket {
    margin: 0;
}

    Please remove the extra closing bracket.

    Best regards,
    Nikko

    March 19, 2021 at 12:08 am #1289064
    hacart

    Hello Nikko,

    It did finally work. Great thanks for being so patient and well-disposed as usual.

    Great regards!

    H

    March 19, 2021 at 3:09 am #1289071
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Can't center align SOCIAL ICONS on socket area’ is closed to new replies.