Align Footer Widgets on Mobile

Hi guys,

Great theme. I have searched the forum but can’t seem to find a solution to my problem. I have 2 columns in my footer, one aligned left and the other aligned right. This looks good on desktop, however on mobile it looks daft.

Is it possible to align the widgets all to the centre on mobile devices?

site is: www.myfantasyfootball.co.uk

Thanks

Hi,

Please try the CSS code below to centering the footer widget when on mobile screen:

@media only screen and (max-width: 768px){
  .footer-widgets, .footer-widgets .sidebar-column {
    text-align: center;
  }
}

You can put the code using custom css plugin.

Regards,
Awan

Hello there,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width:992px){
  
  #text-10,
  #mc4wp_form_widget-7,
  .footer-widgets .menu,
  .ow-button-base.ow-button-align-left,
  #sow-social-media-buttons-4 .social-media-button-container{
    text-align: center;
  }

}

Regards,
Kharis

Hi guys,

Thanks a lot for your prompt responses.

This worked perfectly.

Have a great day!

Try adding this extra CSS code:

    @media only screen and (max-width: 991px) {
      .footer-widgets ul.social-menu-widget {
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
    } 

and remove unnecessary social menu items through Appearance > Menus.

Regards,
Kharis

Hi Kharis, really appreciate your fast response. Indeed I had some unnecessary items in the social menu, I removed them, but the issue is still there on all types of devices now.

Hello there,

margin-left value in this code should be auto. Please correct it.

       @media only screen and (max-width: 991px) {
          .footer-widgets ul.social-menu-widget {
            display: table;
            margin-left: 0;
            margin-right: auto;
          }
        } 

Regards,
Kharis