Algin Footer With Left Aligned Text

Hi

I have managed to get the footer to align in the center using the following code

#sidebar-footer.footer-widgets.widget-area .container {
	text-align: center;
}

This produces this

However, I now want the text to align to the left.

The screenshot below only demonstrates what I’m trying to achieve.

Many thanks

Will

Hello Will,

I am sorry, I didn’t get it. Please put some descriptive annotations to help me better understand it.

Regards,
Kharis

Hi Kharis

I’ve updated the images on the orignal post. Please see above.

Many thanks

Will

Hello Will,

The footer area’s container should expand widely aligned to the top left and right header. You can see it on our demo:

https://demo.athemes.com/sydney-pro/

Did you apply some custom CSS code to style it before?

If possible, please share a link to your site, so I can have a look.

Regards,
Kharis

Hi Kharis

Sorry for the late reply. The URL is https://thesurgenetwork.net

Hello there,

I checked your site and found it looks good now.

Let me know if you still need an assistance with it.

Regards,
Kharis

Hi Kharis

The red box in the screenshot shows the containter being centered and the green line shows that the alignment is still on the left. Do you notice how the spacing (the turquoise lines) is equally spaced?

As shown in the inspector I applied 350px left padding just so I can demonstrate it.

I hope that makes more sense?

Kind regards

Will

Hello Will,

Your site now seems not to use footer widgets. Do you still need an assistance with it?

Regards,
Kharis

Hi Kharis

So still need some help with this as I haven’t found a way to centralise the footer. The footer widgets haven’t changed and they are just simply menu widgets.

Kind regards

Will

Hi Kharis

Are you able to help out with this please?

Kind regards

Will

I have finally resolved the issue by using the following code

#sidebar-footer .container .widget {
	display: table;
	margin: 0 auto;
}

However, the only problem I have now is after 991px width or lower the alignment messes up. Anything you could suggest?

Will

Hello Will,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width:641px) and (max-width: 991px) {
  .footer-widgets .sidebar-column.col-md-4 {
    width: 33.33333333%;
    float: left;
  } 
}

@media only screen and (max-width: 640px) {
  .footer-widgets .sidebar-column.col-md-4 aside {
    width: 100%;
    display: block;
  } 
}

Regards,
Kharis

Thank you Kharis

This works perfectly. I made some small tweaks but without your help I would be forever trying to figure it out.

@media only screen and (min-width:640px) and (max-width: 991px) {
  .footer-widgets .sidebar-column.col-md-4 {
    width: 33.33333333%;
    float: left;
  } 
}
@media only screen and (max-width: 640px) {
  .footer-widgets .sidebar-column.col-md-4 aside {
    width: 33.33333333%;
    display: table;
	float: left;
  } 
}
@media only screen and (max-width: 545px) {
  .footer-widgets .sidebar-column.col-md-4 aside {
    width: 50%;
    display: block;
	float: none;
	text-align: center;
  } 
}
@media only screen and (max-width: 376px) {
  .footer-widgets .sidebar-column.col-md-4 aside {
    width: 50%;
    display: block;
	float: none;
	text-align: center;
  } 
}

Kind regards

Will

Great Will !

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis

The only annoyance I have is at in and around 640px wide by a 1px or so the footer squashes itself and it’s jumping all over the place. Is there something wrong with my code?

/* ALIGN FOOTER */
#sidebar-footer .container .widget {
	display: table;
	margin: 0 auto;
	padding: 0 20px;
}
@media only screen and (min-width:640px) and (max-width: 991px) {
  .footer-widgets .sidebar-column.col-md-4 {
    width: 33.33333333%;
    float: left;
  } 
}
@media only screen and (max-width: 640px) {
  .footer-widgets .sidebar-column.col-md-4 aside {
    width: 50%;
    display: block;
	float: none;
	text-align: center;
  } 
}
@media only screen and (max-width: 376px) {
  .footer-widgets .sidebar-column.col-md-4 aside {
    width: 50%;
    display: block;
	float: none;
	text-align: center;
  } 
}

Additionally at 639px wide and below the ordering of the menu moves around. Any suggestions?

Lastly is there a way to align the menus up as shown in the below picture a shorter text menu idents itself?
Not%20Aligned

Many thanks

Will

Hello Will,

Try adding this CSS code:

#sidebar-footer .container .widget {
  display: block;
}

to fully expand each widget blocks.

Regards,
Kharis

Unfortunately that just nudges the footer back over the left (as a whole) again.

Sorry for that.

Probably specifying a fixed with could work for you. Please try

    #sidebar-footer .container .widget {
      min-width: 300px;
      max-width: 100%;
    }

Regards,
Kharis

That works perfectly across all device sizes. I didn’t think of setting a minimum width. I completely overlooked that CSS property.

Thank you Kharis

Kind regards

Will

You’re welcome Will! Glad to know that helped you out.

Regards,
Kharis