[Resolved] Footer isn't centered

Home Forums Support [Resolved] Footer isn't centered

Home Forums Support Footer isn't centered

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1261819
    Huseyin

    Hi Generatepress Team

    I don’t know but my footer isn’t centred, I have attached the URL, and a screenshot of the settings of layout>footer.

    https://ibb.co/f8LYjNR
    https://ibb.co/gm3WPzR

    #1261822
    Leo
    Staff
    Customer Support

    Hi there,

    Everything looks centered in your screenshot to me.

    Do you want the menu items in the footer widget to center or something?

    #1264138
    Huseyin

    Hi Leo

    I want footer section centred, check the screenshot, where the footer isn’t centred https://ibb.co/2qxJCvJ

    My staging site URL:https://wordpress-394091-1251842.cloudwaysapps.com/

    #1264517
    David
    Staff
    Customer Support

    Hi there,

    temporarily add this CSS:

    .footer-widgets .widget-title {
        background-color: #ccc;
    }

    It’s an easy way of seeing that each of your widgets are 20% wide and that the row is actually centred on the page.

    What you’re asking is effectively to break the 20% width and allow some footer widgets to be wider than others – which you can do with this CSS:

    @media(min-width: 1025px) {
        .site-footer .footer-widgets-container .inside-footer-widgets {
            display: flex;
            justify-content: space-between;
        } 
        .site-footer .footer-widgets-container .inside-footer-widgets .grid-20 {
            width: unset;
        } 
    }
    #1264693
    Huseyin

    thank you David

    #1265006
    David
    Staff
    Customer Support

    You’re welcome

    #1266083
    Huseyin

    I have discovered a problem with my footer when it’s in Ipad, could you guys check it out. (note: that I don’t have the code/s above)
    SCREENSHOT https://ibb.co/P6jW0Wn
    URL https://wordpress-394091-1251842.cloudwaysapps.com

    #1266403
    David
    Staff
    Customer Support

    Tom provides some code here to make it two columns on Portrait tablet:

    https://generatepress.com/forums/topic/footer-widget-tablet-portrait-view/#post-278946

    you can reduce the min-width: 769px value to a smaller value e.g min-width: 700px to keep it 2 column on smaller devices.

    #1266708
    Huseyin

    Thanks, David

    For the past 10 minutes, I played with the number for min-width: couldn’t succeed.

    #1267112
    David
    Staff
    Customer Support

    Try this CSS:

    @media (max-width: 1024px) and (min-width: 600px) {
        .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
            display: flex;
            flex-wrap: wrap;
        }
    
        .site-footer .inside-footer-widgets>div {
            width: 50%;
        }
    }
    #1267204
    Huseyin

    legend thanksss

    #1267357
    David
    Staff
    Customer Support

    You’re welcome

    #1451579
    Huseyin

    https://generatepress.com/forums/topic/footer-isnt-centered/#post-1267112

    Hi,
    May I request updated CSS for the new flexbox Structure?

    #1451779
    David
    Staff
    Customer Support

    Try this:

    @media (max-width: 1024px) and (min-width: 600px) {
        .footer-widgets .inside-footer-widgets {
            flex-direction: row;
            flex-wrap: wrap;
        }
    
        .site-footer .inside-footer-widgets>div {
            flex: 1 1 50%;
            margin-bottom: 2em;
        }
    }
    #1451786
    Huseyin

    Thanks for the reply

    This no space between the Widget titles & content
    https://ibb.co/VWwrXvs

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