align links in footer in desktop and mobile

  • Resolved larebelion

    (@larebelion)


    5 years, 9 months ago

    Hi,

    this is my first post here. I hope i do it right. I have searched the forum and found many threads, but nothing which solves all my problems with the footer ??

    I used a css-snipped which I found here in the forum to align the widgets (custom links) in the footer.

    #footer {
    text-align: center;
}
#footer .owp-social-share li {
    float: none;
    display: inline-block;
}
#footer-widgets .footer-box .widget-title {
    border: 0;
    padding: 0;
}

    That worked well, but now the titles are not exactly aligned with the links and the red line on the left side from the links is gone.

    In the mobile Version is nothing aligned nor centered ??

    Basically I just want the standard-footer of ocean-wp, but centered.

    I hope you can help me.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello,

    Use the below code instead of the code you are using. Since you are not using social share icons, so I removed the code for it. 

    #footer {
    text-align: center;
}
#footer-widgets .footer-box .widget-title {
    width: fit-content;
    margin: 10px auto;
}
    Thread Starter larebelion

    (@larebelion)

    Nice, that works fine for the desktop version. Thanks a lot.

    But in the mobile Version is the whole block still not in center. Do you have a solution there, too?

    Go to Customize > Footer Widgets and remove the left padding from there.
    Or add the below code to the Customize > Custom CSS section.

    @media (max-width: 480px) {
#footer-widgets {
    padding: 0;
}
}
    Thread Starter larebelion

    (@larebelion)

    Thanks, Amit, for your response.

    Unfortunately it doesn’t work. It works, when i remove the padding in the investigate-mode in Firefox, but not with the code and I don’t know where to change the css of the footer manually.

    I hope you understand what I trying to say.

    Did you clear the cache or used a different browser to check the site after adding the code?
    Try this one and check it works or not.

    @media (max-width: 480px) {
#footer-widgets {
    padding: 0 !important;
}
}
    Thread Starter larebelion

    (@larebelion)

    Yeah, that worked quite well.

    I thoughed I checked the different browsers and even cleared the cache. Perhaps I did not? It was late that evening. Sorry for all the problems I made and big THANK YOU for all your patience and help.

    Bye

    Glad to hear that it is fixed!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘align links in footer in desktop and mobile’ is closed to new replies.