[Solved] CSS Media queries not working on iPhone

kevinf
 
on Jul 04, 2022 11:46 PM
516 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 06, 2022 08:44 AM

You need to include the meta tag to the header.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Then use the below css.

<style type="text/css">
    .calsize { height: 50% !important; width: 50% !important; font-size: 14px !important; }

    @media (max-width: 420px) {
        .calsize { height: 200% !important; width: 200% !important; font-size: xx-large !important; }
    }
</style>