locked
How do I make my page appropriate on the mobile browser RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1865404792 posted

    hi all

    After completing the creation of the page
    I now want to improve the external appearance

    I have this pic
    http://www.mediafire.com/file/fibvrtkdpz85srb/Untitled-all.jpg/file

    I want the look to remain in Windows as it is
    But in the mobile it is full screen, as in the bottom picture

    I looked for a solution and the most popular one was using Bootstrap
    But it does arrange some fields to be mobile compatible
    But on my page each row consists of only one field
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style4 {
            text-align: right;
        }
        .auto-style5 {
            font-size: 35pt;
            color: #CC0000;
        }
        .auto-style6 {
            text-align: center;
        }
        .auto-style7 {
            font-weight: bold;
            color: #CC0000;
        }
        .auto-style8 {
            background-color: #F0F0F0;
        }
        .auto-style9 {
            width: 3px;
        }
        .auto-style11 {
            color: #CC0066;
            font-size: x-large;
        }
        .auto-style12 {
            color: #FF0066;
            font-size: x-large;
        }
        .auto-style13 {
            color: #3333CC;
            font-size: large;
        }
        .auto-style14 {
            color: #0000CC;
        }
        .auto-style15 {
            color: #FFFFFF;
            font-size: large;
            background-color: #FF0066;
        }
        .auto-style16 {
            font-size: x-large;
        }
        .auto-style17 {
            width: 13px;
        }
        .auto-style18 {
            text-align: right;
            width: 13px;
        }
        .auto-style19 {
            text-align: left;
        }
    </style>
</head>
<body>

<!--ادخال فقط ارقام في تكست رقم المستخدم -->
    <script type="text/javascript">
        function CheckNumeric(e) {
            if (window.event)
                // IE             
            {
                if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8)
            {
                event.returnValue = false;
                return false;
            }
            }
            else {
                // Fire Fox
                if ((e.which < 48 || e.which > 57) & e.which != 8)
                {
                    e.preventDefault();
                    return false;
                }
            }
        }
    </script>
    <!--  ----------------------------------  -->
    
    <form id="form1" runat="server">
    <div>
    
        <br />
        <table align="center" class="auto-style8">
            <tr>
                <td class="auto-style6" colspan="5">
                    <asp:Image ID="Image1" runat="server" Height="88px" ImageUrl="~/img/logo.png" Width="353px" />
                </td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td class="auto-style4" colspan="2">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td class="auto-style6" colspan="3"><strong>
                    <asp:Label ID="Label4" runat="server" CssClass="auto-style5" Font-Names="Arabic Typesetting" Text="تسجيل الدخول"></asp:Label>
                    </strong></td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td class="auto-style4" colspan="2">
                    <asp:DropDownList ID="DropDownList1" runat="server" Height="28px" Width="209px" Visible="False">
                    </asp:DropDownList>
                </td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style18">
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtuser" CssClass="auto-style12" ErrorMessage="ادخل رقم المستخدم">*</asp:RequiredFieldValidator>
                </td>
                <td class="auto-style19" colspan="2">
                    <asp:TextBox ID="txtuser" onkeypress="CheckNumeric(event);" runat="server" onpaste="return false" oncopy="return false" oncut="return false" Height="35px" Width="235px" CssClass="auto-style16" autocomplete="off"></asp:TextBox>
                </td>
                <td class="auto-style6"><strong>
                    <asp:Label ID="Label2" runat="server" CssClass="auto-style13" Text=":رقم المستخدم" Width="100%"></asp:Label>
                    </strong></td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style18">
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtpass" CssClass="auto-style12" ErrorMessage="ادخل كلمة السر">*</asp:RequiredFieldValidator>
                </td>
                <td class="auto-style19" colspan="2">
                    <asp:TextBox ID="txtpass" runat="server" onpaste="return false" oncopy="return false" oncut="return false" Height="35px" Width="235px" CssClass="auto-style16" TextMode="Password"></asp:TextBox>
                </td>
                <td class="auto-style6"><strong>
                    <asp:Label ID="Label3" runat="server" CssClass="auto-style13" Text=":كلمة السر" Width="100%"></asp:Label>
                    </strong></td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style6" colspan="5">
                    <asp:Label ID="Label8" runat="server" BorderStyle="None" CssClass="auto-style15" Height="25px" Text="الرجاء التأكد من ادخال البيانات بشكل سليم" Visible="False" Width="100%"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td class="auto-style6" colspan="3">
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="auto-style11" DisplayMode="List" />
                </td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td class="auto-style6" colspan="2"><strong>
                    <asp:Button ID="btnenter" runat="server" CssClass="auto-style7" Font-Size="15pt" Height="35px" OnClick="btnenter_Click" Text="دخول" Width="240px" />
                    </strong></td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style6" colspan="5">
                    <asp:Label ID="Label7" runat="server" CssClass="auto-style14" Font-Names="Andalus" Text="Aahakimi   -   771343210"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="auto-style17">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
            </tr>
        </table>
        <br />
    
    </div>
    </form>
</body>
</html>


    Thursday, August 20, 2020 8:44 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User303363814 posted

    show only the table
    Do you mean without the form that it is part of?

    (I won't open your image file - all those 'Download' buttons made me not trust that site)

    The basic approach is to style your page for mobile first.  When you have it looking the way you want you can enhance the appearance with media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp.  (you don't always need the media query  - depends on your particular needs) So use the developer tools in your browser to set the browser to emulate a mobile device and start styling!  Once you have the mobile appearance the way you want it, change the developer tools to emulate a tablet or desktop display and fix the things you don't like.

    Try

    https://www.youtube.com/watch?v=zyNhxN6sToM or

    https://www.youtube.com/watch?v=vklBHA_YXD8 or

    https://www.youtube.com/watch?v=0ohtVzCSHqs 

    or just search for 'Responsive design'.  If you want to use a particular technology (you mentioned bootstrap) then add the name of the technology to your search terms.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 24, 2020 3:06 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-474980206 posted

    you need to set the viewport scaling:

       https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

    Thursday, August 20, 2020 5:45 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1865404792 posted
    thank you
    But I want to show only the table
    As in the attached image (image from the design)

    http://www.mediafire.com/file/aqabefi4q8xx4la/a12.jpg/file

    Sunday, August 23, 2020 3:02 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User303363814 posted

    show only the table
    Do you mean without the form that it is part of?

    (I won't open your image file - all those 'Download' buttons made me not trust that site)

    The basic approach is to style your page for mobile first.  When you have it looking the way you want you can enhance the appearance with media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp.  (you don't always need the media query  - depends on your particular needs) So use the developer tools in your browser to set the browser to emulate a mobile device and start styling!  Once you have the mobile appearance the way you want it, change the developer tools to emulate a tablet or desktop display and fix the things you don't like.

    Try

    https://www.youtube.com/watch?v=zyNhxN6sToM or

    https://www.youtube.com/watch?v=vklBHA_YXD8 or

    https://www.youtube.com/watch?v=0ohtVzCSHqs 

    or just search for 'Responsive design'.  If you want to use a particular technology (you mentioned bootstrap) then add the name of the technology to your search terms.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 24, 2020 3:06 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1865404792 posted

    (I won't open your image file - all those 'Download' buttons made me not trust that site)

    Sorry, I do not know how to add the image directly to the topic without a link
    But we are nearing a solution
    /* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

    What do I write as an alternative to the font size
    To display only the desired table or page size
    Monday, August 24, 2020 6:21 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User303363814 posted

    Do you know any css?  You can start your journey at https://www.w3schools.com/css/

    Monday, August 24, 2020 7:13 AM