[Solved] CSS Media queries not working on iPhone

I have an asp Calendar.

If i change the Percentages or font it doesn't seem to work I would like to Calendar to fill the width of the screen.

Is it possible to resize it and change all the font sizes for dates, day name month heading in the panel to display larger on an Iphone using the code below.

<asp:Panel ID="pCalender" runat="server" Style="z-index: 1; left: 66px; top: 13px; position: absolute; height: 875px; width: 970px" Visible="true">
    <asp:Calendar ID="calDate" class="calsize" runat="server" Style="z-index: 10; left: 11px; top: 51px; position: absolute; height: 100%; width: 100%" BackColor="White" BorderColor="Black" Font-Names="Times New Roman" ForeColor="Black" NextPrevFormat="ShortMonth" SelectionChanged="calDate_SelectionChanged" MonthChange="calDate_MonthChange" NextMonthText="" PrevMonthText="" Font-Size="20pt">
        <DayHeaderStyle Font-Bold="True" Font-Size="20pt" ForeColor="#333333" Height="10px" BackColor="#CCCCCC" HorizontalAlign="Center" />
        <DayStyle Font-Size="20pt" HorizontalAlign="Center" Width="14%" />
        <NextPrevStyle Font-Size="20pt" ForeColor="White" />
        <OtherMonthDayStyle ForeColor="#999999" Font-Size="20pt" />
        <SelectedDayStyle BackColor="Blue" ForeColor="White" />
        <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt" ForeColor="#333333" Width="1%" />
        <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="20pt" ForeColor="White" Height="14pt" />
        <TodayDayStyle BackColor="#CCCC99" />
        <WeekendDayStyle BackColor="Aqua" Font-Size="20pt" />
    </asp:Calendar>
    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/Previous.png" Style="z-index: 0; left: 12px; top: -10px; position: absolute; width: 46px; height: 44px; right: 878px;" ToolTip="Previous Date" />
    <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/Next.png" Style="z-index: 0; left: 226px; top: -12px; position: absolute; width: 46px; height: 44px; right: 664px;" ToolTip="Next Date" />
    <asp:Button ID="bClose" class="bclose" runat="server" Style="z-index: 10; left: 16px; top: 394px; position: absolute" Text="Close" />
</asp:Panel>

<style>
    .calsize {
        height: 50% !important;
        width: 50% !important;
         font-size: 14px !important;
    }
 
    @media only screen and (max-width: 420px) {
        .calsize {
            height: 250% !important;
            width: 250% !important;
            font-size: 20px !important;
        }
    }
</style>