css trying to resize jQuery datepicker

Question

I need to resize this datepicker... But the calendar part just doesn't want to resize with the datepicker...

Image:

Code(CSS):

.ui-datepicker-inline {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #FFFFFF;
}
@media screen and (max-width: 540px) {
    #headerSeparator {
        width: 80%;
    }
    .ui-datepicker-inline, .ui-datepicker, .ui-datepicker-calendar, .ui-widget-content {
        width: 80%;
    }
}

Edit :

here is my javascript

$(document).ready(function()
                    {
                        $("#datepicker").datepicker({ dayNamesMin: ["DIM", "LYN", "MAR", "MER", "JEU", "VEN", "SAM"], monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], altField: "#date", dateFormat: "yy-mm-dd" });
                    });

Answer 1

Better to change the font size of date picker rather than width.Just try this code:

.ui-datepicker{
 font-size:13px;
}