ASP.net <meta name="viewport" content="width=device-width" /> not allowing GridView to stretch 100%

Hi

I am using the following ASP.net page for mobile devices. The line     <meta name="viewport" content="width=device-width" /> in the header
resizes everything well for mobile devices but it causes the GridView to not stretch 100% across the screen, which I need to happen.
Could someone please explain why this is. If I exclude that single piece of markup the GridView stretches 100% across my mobile screen

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Mobile_Offers_By_Me.aspx.vb" Inherits="Steel.Mobile_Offers_To_Me2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <!--Following line resizes all text and boxes for mobile devices-->
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

        <div style="text-align:center">
             <asp:LinkButton ID="LinkButton1" runat="server" Font-Size="50pt" ForeColor="#468499" Font-Underline="False" Font-Names="Verdana" PostBackUrl="~/Mobile.aspx" >Steel Yard</asp:LinkButton>
        </div> 
    <asp:Panel ID="Panel_Login" runat="server">

     <asp:Label ID="lblUsername" runat="server" Text="Username" ></asp:Label>
     <asp:TextBox ID="txtUsername" runat="server" Width="100%"></asp:TextBox>
     <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
     <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="100%"></asp:TextBox>
     <asp:Button ID="btnLogin" runat="server" cssclass="roundedCorner" Text="Log In" Width="100%" BackColor="White" />
     <asp:DropDownList ID="DropDownList_Number_Days" runat="server">
        <asp:ListItem Value="1"></asp:ListItem>
        <asp:ListItem Value="2"></asp:ListItem>
        <asp:ListItem Value="5"></asp:ListItem>
        <asp:ListItem Value="30"></asp:ListItem>
        <asp:ListItem Selected="True" Value="365"></asp:ListItem>
     </asp:DropDownList>
        <br />
     <asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="~/MyProfile.aspx">Register</asp:LinkButton> 
        &nbsp;
        <asp:LinkButton ID="LinkButtonForgotPassword" runat="server" PostBackUrl="~/Forgot_Password.aspx">Forgot Password</asp:LinkButton>
    </asp:Panel>

        <asp:Panel ID="Panel3" runat="server" Visible="False" Width="100%">

                <asp:Label ID="Label1" runat="server" Text="OFFERS BY ME" Font-Size="XX-Large" ForeColor="#468499"></asp:Label>

                <br />

                <asp:Label ID="Label5" runat="server" Width="688px"></asp:Label>
                <asp:Label ID="lblErrorEmailing" runat="server" ForeColor="Red"></asp:Label>
                &nbsp;<asp:Label ID="lblSuccessEmailing" runat="server" ForeColor="#006600"></asp:Label>

                  <br />
                  <asp:Label ID="Label6" runat="server" Text="Offer ID:" Visible="False"></asp:Label>
                  &nbsp;<asp:Label ID="lblOfferID" runat="server" ForeColor="#000066" Visible="False"></asp:Label>
                  &nbsp;<asp:Label ID="Label7" runat="server" Text="Counteroffer:" Visible="False"></asp:Label>
                  &nbsp;<asp:Label ID="lblAccepted" runat="server" ForeColor="#006600" Visible="False"></asp:Label>
                  &nbsp;<asp:Label ID="lblDeclined" runat="server" ForeColor="Red" Visible="False"></asp:Label>

                <br />
             <asp:Label ID="lblTotal" runat="server" Text="-" Font-Size="X-Large" ForeColor="#468499"></asp:Label>
                            
            <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False" Width="100%">
                   
                <Columns>
            
                    <asp:TemplateField HeaderText="?" ControlStyle-Forecolor ="Gray">
                            <ItemTemplate>
                                <asp:Button ID="ButtonQuestion" runat="server"  
                              CommandName="btnQuestion" 
                              CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                              Text="?" />
                            </ItemTemplate>
                            <ControlStyle ForeColor="#468499" />
                       </asp:TemplateField> 


                        <asp:TemplateField HeaderText="Offer ID" HeaderStyle-Wrap="true" SortExpression="ID" Visible="false">
                               <ItemTemplate>
                                <asp:Label AutoPostBack="false" ID="lblOfferID" runat="server" Text='<%# Bind("ID")%>'  Visible="false"></asp:Label>
                                </ItemTemplate> 
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Order Qty" HeaderStyle-Wrap="true" SortExpression="Quantity" Visible="true">
                               <ItemTemplate>
                                <asp:Label AutoPostBack="false" ID="lblOrderQty" runat="server" Text='<%# Bind("Quantity")%>' visible="true"></asp:Label>
                                </ItemTemplate> 
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Item ID" SortExpression="Item ID" Visible="true">
                                <ItemTemplate>
                                <asp:Label ID="lblItemID" runat="server" Text='<%# Bind("[Item ID]")%>' Visible="true"></asp:Label>
                                </ItemTemplate> 
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Description" ItemStyle-HorizontalAlign="Left" ItemStyle-Wrap="true" SortExpression="Description">
                                <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# Bind("Description")%>'   ></asp:Label>
                                </ItemTemplate> 
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Rands per Ton" HeaderStyle-Wrap="true" SortExpression="Unit Price" Visible="true">
                                <ItemTemplate>
                                <asp:Label ID="lblUnitPrice" runat="server" Text=  '<%#Eval(“Unit Price”, ”{0:N0}”)%>' Visible="true" ></asp:Label>  
                                </ItemTemplate> 
                        </asp:TemplateField>
                       
                        <asp:TemplateField HeaderText="Total Price" HeaderStyle-Wrap="true" SortExpression="Total Price" >
                                <ItemTemplate>
                                <asp:Label ID="lblTotalPrice" runat="server"  Text='<%#Eval(“Total Price”, ”{0:N0}”)%>' ></asp:Label>
                                
                                </ItemTemplate> 
                        </asp:TemplateField>

                       <asp:TemplateField HeaderText="Offer" SortExpression="Offer">
                                <ItemTemplate>
                                <asp:Label ID="lblOffer" runat="server" Text='<%#Eval(“Offer”, ”{0:N0}”)%>' ></asp:Label>
                                
                                </ItemTemplate> 
                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Status" SortExpression="Status">
                                <ItemTemplate>
                                <asp:Label ID="lblStatus" runat="server" Text='<%# Bind("Status")%>'></asp:Label>                
                                </ItemTemplate> 
                        </asp:TemplateField>    
                    
               <asp:TemplateField  ControlStyle-Forecolor="Navy"  HeaderText="Del">
                    <ItemTemplate>
                        <asp:Button ID="ButtonDelete" runat="server" CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>" CommandName="MyButtonDelete" Text="Del" />
                    </ItemTemplate>
                    <ControlStyle ForeColor="#468499" />
                </asp:TemplateField>

                        <asp:TemplateField HeaderText="Counteroffer" HeaderStyle-Wrap="true" SortExpression="Counteroffer" Visible="false">
                                <ItemTemplate>
                                <asp:Label ID="lblCounterOffer" runat="server" Text='<%#Eval(“Counteroffer”, ”{0:N0}”)%>' Visible="false"></asp:Label>
                                </ItemTemplate> 
                        </asp:TemplateField>
                        
                        <asp:TemplateField HeaderText="CO Status" HeaderStyle-Wrap="true" SortExpression="Counteroffer Status" Visible="false">
                                <ItemTemplate>
                                <asp:Label ID="lblCounterOfferStatus" runat="server" Text='<%# Bind("[Counteroffer Status]")%>' Visible="false"></asp:Label>                
                                </ItemTemplate> 
                        </asp:TemplateField>

                <asp:TemplateField HeaderText="Accept" ControlStyle-Forecolor ="Navy" Visible="false">
                    <ItemTemplate>
                        <asp:Button ID="Button1" runat="server" 
                      CommandName="MyButton1" 
                      CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                      Text="Accept" Visible="false" />
                    </ItemTemplate>
                    <ControlStyle ForeColor="#468499" />
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Decline" ControlStyle-Forecolor ="Navy" Visible="false">
                    <ItemTemplate>
                        <asp:Button ID="Button2" runat="server" 
                      CommandName="MyButton2" 
                      CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                      Text="Decline" Visible="false" />
                    </ItemTemplate>
                    <ControlStyle  ForeColor="#468499" />
         
                </asp:TemplateField>

               <asp:TemplateField HeaderText="Date Time" SortExpression="Date_Time" Visible="false">
                        <ItemTemplate>
                        <asp:Label ID="lblDateTime" runat="server" Text='<%#Eval("Date_Time", "{0:dd MMM yyyy HH:mm:ss}")%>' Visible="false"></asp:Label>                       
                        </ItemTemplate> 
                </asp:TemplateField>
            
                    <asp:TemplateField HeaderText="Seller Username" Visible="false">
                        <ItemTemplate>
                        <asp:Label ID="lblSellerUsername" runat="server" Text='<%# Bind("SellerUsername")%>' Visible="false"></asp:Label>                
                        </ItemTemplate> 
                </asp:TemplateField>
              
                <asp:TemplateField HeaderText="Buyer Username" Visible="false">
                        <ItemTemplate>
                        <asp:Label ID="lblBuyerUsername" runat="server" Text='<%# Bind("BuyerUsername")%>'  Visible="false"></asp:Label>                
                        </ItemTemplate> 
                </asp:TemplateField>

                    </Columns>

            <FooterStyle BackColor="#f5f5f5" ForeColor="#468499" />
            <HeaderStyle BackColor="#468499" Font-Bold="True" ForeColor="White" CssClass="HeaderFreez"/>
            <PagerStyle BackColor="#468499" ForeColor="#468499" HorizontalAlign="Left"  />
            <RowStyle ForeColor="#468499" BackColor="White" HorizontalAlign="Right" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <SortedAscendingCellStyle BackColor="#EDF6F6" />
            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
            <SortedDescendingCellStyle BackColor="#D6DFDF" />
            <SortedDescendingHeaderStyle BackColor="#002876" />

          </asp:GridView>               
            
            <br />

      </asp:Panel>

        </div>
    </form>
</body>
</html>

Open in new window

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technology NinjaCommented:
Hi Murray,

Please try adding
@-ms-viewport{ width: device-width; } 

Open in new window


In your Style.css

Regards,
Chinmay.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks for the help but that unfortunately made no difference. I have other similar pages where the grid fits exactly in but for some reason I can't get this page to work
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
I tried a fresh page and got that to work. Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.