locked
want to make page mobile responsive? RRS feed

  • Question

  • User-1647172364 posted

    Hlo Professionals!

    I want to make my page responsive and i am also using bootstrap but then also it is not coming mobile responsive pls check where i am doing mistake.

    Here is my code

    Pls Execute it.

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="../bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="../bootstrap-theme.min.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .container-fluid{background-color:#000; width:100%; } .btn { background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 8px; border: none; color: #eeeeee; cursor: pointer; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; width:30em; } @keyframes glowing { 0% { background-color: #F00; box-shadow: 0 0 20px #F00;; } 50% { background-color: #F00; box-shadow: 0 0 20px #F00;; } 100% { background-color: #F00; box-shadow: 0 0 55px #F00;; } } .btn { animation: glowing 820ms infinite; } #Txtstyle2[type=text], textarea { transition: all 0.30s ease-in-out; outline: #F00; border: 2px solid #F00; padding:0.6em; width:45em; } #Txtstyle2[type=text]:focus, textarea:focus { box-shadow: 0 0 20px #F00; border: 2px solid #F00;; } </style> </head> <body> <div class= "container-fluid"> <center><img src="file:///C|/Users/DELL/Desktop/fs600.png" height="50" /> </center> <div class="row"> <div class="col-xs-1"></div> <div class="col-xs-10" align="center"> <br /><b style="font-size:49px; margin-left:50px; color:white; font-family:Oswald, Helvetica, sans-serif; font-weight:600; letter-spacing:1px; text-shadow: rgba(0,0,0,0.2)">"HOW TO MAKE MONEY WITH CLOUD COVER EIGHT INCOME STREAMS WITH ONLINE LEADS FROM TARGETED TRAFFIC WITH KOEL COIN"</b> </div> <div class="col-xs-1"></div> </div> <div class="row"> <p style="color:#FFF; font-size:30px; text-align:center "><strong><br />Enter your details below to learn more!</strong></p> </div> <div class="row"> <div class="col-xs-2"></div> <br /> <div class="col-xs-8"></div> <center><input type = "text" id = "Txtstyle2" placeholder="Enter Your REAL Phone No. Here..." required="required"/> </center> <div class="col-xs-2"></div> </div> <div class="row"> <div class="col-xs-2"></div> <br /> <div class="col-xs-8"></div> <center><input type = "text" id = "Txtstyle2" placeholder="Enter Your REAL Email Here..." required="required"/> </center> <div class="col-xs-2"></div> </div> <div class="row"> <br /><br /> <center> <input type="button" class="btn" href="#" value="GET INSTANT ACCESS NOW" /> </center> </div> <br /> </div> </body> </html>

    Saturday, August 8, 2020 4:49 PM

Answers

  • User-943250815 posted

    For Viewport I use

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=1" />

    Also take a llok here https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 9, 2020 1:11 AM
  • User1535942433 posted

    Hi sanam13,

    Accroding to your description and codes,as far as I think,you need to remove the width of your button and textareas to make it responsive to mobile.In Bootstrap responsive ,you couldn't set the fixed width and height.

    More details,you could refer to below codes:

     <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html" />
        <meta charset="utf-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            .container-fluid {
                background-color: #000;
                width: 100%;
            }
    
            .btn {
                background-color: #1c87c9;
                -webkit-border-radius: 60px;
                border-radius: 8px;
                border: none;
                color: #eeeeee;
                cursor: pointer;
                font-family: sans-serif;
                font-size: 20px;
                padding: 10px 10px;
                text-align: center;
                text-decoration: none;
            }
    
            @keyframes glowing {
                0% {
                    background-color: #F00;
                    box-shadow: 0 0 20px #F00;
                }
    
                50% {
                    background-color: #F00;
                    box-shadow: 0 0 20px #F00;
                }
    
                100% {
                    background-color: #F00;
                    box-shadow: 0 0 55px #F00;
                }
            }
    
            .btn {
                animation: glowing 820ms infinite;
            }
    
            #Txtstyle2[type=text], textarea {
                transition: all 0.30s ease-in-out;
                outline: #F00;
                border: 2px solid #F00;
                padding: 0.6em;
            }
    
                #Txtstyle2[type=text]:focus, textarea:focus {
                    box-shadow: 0 0 20px #F00;
                    border: 2px solid #F00;
                }
        </style>
    
    
    
    
     <div class="container-fluid">
    
                <center><img src="file:///C|/Users/DELL/Desktop/fs600.png" height="50"  />
        </center>
    
                <div class="row">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-10">
                        <br />
                        <b style="font-size: 49px; margin-left: 50px; color: white; font-family: Oswald, Helvetica, sans-serif; font-weight: 600; letter-spacing: 1px; text-shadow: rgba(0,0,0,0.2)">"HOW TO MAKE MONEY WITH CLOUD COVER EIGHT INCOME STREAMS WITH ONLINE LEADS FROM TARGETED TRAFFIC WITH KOEL COIN"</b>
                    </div>
    
                    <div class="col-xs-1"></div>
    
    
                </div>
                <div class="row">
                    <p style="color: #FFF; font-size: 30px; text-align: center">
                        <strong>
                            <br />
                            Enter your details below to learn more!</strong>
                    </p>
                </div>
    
    
                <div class="row">
    
                    <div class="col-xs-2"></div>
                    <br />
                    <div class="col-xs-8"></div>
                    <center><input type = "text"   id = "Txtstyle2" placeholder="Enter Your REAL Phone No. Here..." required="required"/>
       </center>
                    <div class="col-xs-2"></div>
                </div>
    
                <div class="row">
    
                    <div class="col-xs-2"></div>
                    <br />
                    <div class="col-xs-8"></div>
                    <center><input type = "text"   id = "Txtstyle2" placeholder="Enter Your REAL Email Here..." required="required"/>
       </center>
                    <div class="col-xs-2"></div>
                </div>
    
                <div class="row">
    
                    <br />
                    <br />
                    <center>
       
       <input type="button" class="btn" href="#" value="GET INSTANT ACCESS NOW" />
    </center>
    
                </div>
    
    
    
                <br />
            </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 10, 2020 2:36 AM

All replies

  • User-943250815 posted

    For Viewport I use

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=1" />

    Also take a llok here https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 9, 2020 1:11 AM
  • User1535942433 posted

    Hi sanam13,

    Accroding to your description and codes,as far as I think,you need to remove the width of your button and textareas to make it responsive to mobile.In Bootstrap responsive ,you couldn't set the fixed width and height.

    More details,you could refer to below codes:

     <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html" />
        <meta charset="utf-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            .container-fluid {
                background-color: #000;
                width: 100%;
            }
    
            .btn {
                background-color: #1c87c9;
                -webkit-border-radius: 60px;
                border-radius: 8px;
                border: none;
                color: #eeeeee;
                cursor: pointer;
                font-family: sans-serif;
                font-size: 20px;
                padding: 10px 10px;
                text-align: center;
                text-decoration: none;
            }
    
            @keyframes glowing {
                0% {
                    background-color: #F00;
                    box-shadow: 0 0 20px #F00;
                }
    
                50% {
                    background-color: #F00;
                    box-shadow: 0 0 20px #F00;
                }
    
                100% {
                    background-color: #F00;
                    box-shadow: 0 0 55px #F00;
                }
            }
    
            .btn {
                animation: glowing 820ms infinite;
            }
    
            #Txtstyle2[type=text], textarea {
                transition: all 0.30s ease-in-out;
                outline: #F00;
                border: 2px solid #F00;
                padding: 0.6em;
            }
    
                #Txtstyle2[type=text]:focus, textarea:focus {
                    box-shadow: 0 0 20px #F00;
                    border: 2px solid #F00;
                }
        </style>
    
    
    
    
     <div class="container-fluid">
    
                <center><img src="file:///C|/Users/DELL/Desktop/fs600.png" height="50"  />
        </center>
    
                <div class="row">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-10">
                        <br />
                        <b style="font-size: 49px; margin-left: 50px; color: white; font-family: Oswald, Helvetica, sans-serif; font-weight: 600; letter-spacing: 1px; text-shadow: rgba(0,0,0,0.2)">"HOW TO MAKE MONEY WITH CLOUD COVER EIGHT INCOME STREAMS WITH ONLINE LEADS FROM TARGETED TRAFFIC WITH KOEL COIN"</b>
                    </div>
    
                    <div class="col-xs-1"></div>
    
    
                </div>
                <div class="row">
                    <p style="color: #FFF; font-size: 30px; text-align: center">
                        <strong>
                            <br />
                            Enter your details below to learn more!</strong>
                    </p>
                </div>
    
    
                <div class="row">
    
                    <div class="col-xs-2"></div>
                    <br />
                    <div class="col-xs-8"></div>
                    <center><input type = "text"   id = "Txtstyle2" placeholder="Enter Your REAL Phone No. Here..." required="required"/>
       </center>
                    <div class="col-xs-2"></div>
                </div>
    
                <div class="row">
    
                    <div class="col-xs-2"></div>
                    <br />
                    <div class="col-xs-8"></div>
                    <center><input type = "text"   id = "Txtstyle2" placeholder="Enter Your REAL Email Here..." required="required"/>
       </center>
                    <div class="col-xs-2"></div>
                </div>
    
                <div class="row">
    
                    <br />
                    <br />
                    <center>
       
       <input type="button" class="btn" href="#" value="GET INSTANT ACCESS NOW" />
    </center>
    
                </div>
    
    
    
                <br />
            </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 10, 2020 2:36 AM