Centering The Footer Widget Content

[jbutler97]

Like the title states, I’m trying to center the content in each of the widgets in the Footer.

Dallas Warriors Hockey | Disabled US Military Veterans Hockey Club

There are three widgets and I’ve gotten the first two to center, but the far right (3rd) widget does not seem to want to center. I used the following css, which worked for the first two columns, but again, not for the third.

.x-column.x-md.x-1-3 {
text-align: center;
}

Also, I’d like to change the size of the Event Calendar in the 3rd widget. Below is the current css I have assigned to the Calendar. I’ve tried to give it max-width via css, but that just makes the calendar skinnier and taller. I’d like the whole calendar to proportionately decrease in size.

(hashtag)calendar-5 {
background: white !important;
border: solid 1px red !important;
}

Thanks!

[medievilmusician]

The calendar will not center because it is taking up the entire widget area.
First reduce the calendar size by assigning a defined width to it, then center it using auto margin:

#calendar-5 {

background: white !important;
border: solid 1px red !important;
width: 60%; 
margin: 0 auto;
}

Change the percentage width to whatever you think looks good.

[jade]

Hi there,

Just like what was previously suggested on this thread. you can add a max width to the event calendar widget to make it smaller then add an auto margin to its left and right area like this:

#calendar-5 {
    max-width: 200px;
    margin: 0 auto;
}

Hope this helps.