locked
Display Issue RRS feed

  • Question

  • Hello,

    I am writing to seek assistance on a problem I am having on my site; after building my webpage i hosted it on a free trial hosting, and discovered that the images and some other contents are not covering the width of the web page when using a mobile device, or the web page width is bigger than some content. the address is: http://donald416-001-site1.htempurl.com/Searchweb.aspx. If viewed with a mobile device using Google chrome, you will see and know what I mean.

    I need help in resolving this issue please, and I will be totally grateful if this problem is resolved. Thank you. 

    The code for the web page I used is given below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Searchweb.aspx.cs" Inherits="Searchweb" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Search</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
          <style type="text/css">
    
              .navbar{
                  width:100%;
                  !important ;
                  top:0px;
              }
              .footer {
                  width:100%;
                  !important;
              }
              .container2{
                  width:100%;
              }
              .container{
                  width:100%;
              }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
        </style>
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:no-display;">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <a class="navbar-brand" style="color: white">JOSCHECK</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Searchweb.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="About.aspx" style="color: #FFFFFF">About</a></li>
                        <li><a href="Register.aspx" style="color: #FFFFFF">Cars</a></li>
                         <li><a href="PhoneCheck.aspx" style="color: #FFFFFF">Phones</a></li>
                        <li><a href="Scanner.aspx" style="color: #FFFFFF">QR Code/BarCode Scan</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
               
            <div class="container2">
            <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:160px;">
                    <div class="container">
                   <br /><br /> <h1 style="color: red; margin-top:-2.5%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification Search Our Database For Verification</h1>               
                </div>
                    </div> 
           
               <div class="jumbotron" style="margin-top:-8%; background-image: url('images/homeimg.jpg'); height:350px;background-size: 100% 100%;">
                   <h1 style="color: #200662; margin-left: 10%; font-size: x-large; font-family: Co Headline Corp">Search <i style="color:white; font-size: x-large; font-family: Co Headline Corp">JOSCHECK</i> System for Vehicles, Phones and verify Product(s) Purchased</h1>
                       <p style="margin-left:10%;">
                            <i style="color: red; font-family:St Ryde; font-size:large; font-style:normal">1. Check Vehicles For Verification Before Purchase</i></p>
                      <p style="margin-left:10%;"> <i style="color: red; font-family:St Ryde; font-size:large; font-style:normal">2. Check Phones For Verification Before Purchase</i></p>
                      <p style="margin-left:10%;"> <i style="color: red; font-family:St Ryde; font-size:large; font-style:normal">3. Bar Code Product Verification</i></p>
               </div>
         
             <div>
                <p style="color:#200662; text-align: left; margin-left:2%; font-family:Verdana; font-size:small; margin-top:-2%;">
                  Guard against Vehicle and Phone Theft; Verify Authentic Products</p>
                <p style="margin-left:2%; color:#200662; font-family:St Ryde; font-size:smaller; margin-top:-1%;">Be first to register your Car or Phone and prevent it from being stolen. You can also verify the authenticity of the product you buy with Bar Code Scan</p>
            </div>
            <div>
            <h1 style="font-size:large; font-family:Comic Sans MS; color:#200662; margin-left:2%;">VISION...</h1>
            <p style="font-size:small; font-family:Verdana; margin-left:2%;">The predominant discourse, familiar since from the 1990s, emphasizes infrastructure as one of the principal entities in a global
                system of development. The process of moving a society from a traditional subsistent level towards a modern and scientific
                stage is one of the most perplexing issues facing many nations in the developing world. What is at hand is a conflict between the 
                seemingly non-dynamic forces of traditions and the systematic growth orientation of modernization (Myrdal, 1970). Given these conditions, the 
                process of promoting development is essentially one of organizing and combining various elements in what Mosher terms the 'institutional 
                milieu' of development [1966. 1976]. These elements consist of a nation’s customs and traditions, ideology, physical resources and education.</p>
                </div>
            <br /><br /><br />
            <div style="background-color:#200662; width:auto; height:400%;",>
          <!-- Example row of columns -->
          <div class="row" style="margin-left:1%;">
              <div class="section">
                  <div class="col-lg-4">
                       <img src="images/amg-1889366_1280.png" alt="Toyota-2016-Lineup" width="200" height="100"/>
                      <h2 style="color: darkorange; margin-top: 0; font-size: larger; font-family: St Ryde;">Car Verification and Tracking</h2>
                      <p style="color:white;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                      <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
                  </div>
                  </div>
    
              <div class="col-md-4">
                    <img src="images/2018-Mercedes-Benz-C-300-Sedan.png" alt="fleetimg" width="200" height="100"/>
                  <h2 style="color: darkorange; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone Verification and Tracking</h2>
                  <p style=" color: white;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
    
              <div class="col-md-4">
                    <img src="images/imgbenz.png" alt="imgbenz" width="200" height="100"/>
                  <h2 style="color: darkorange; margin-top: 0; font-size: larger; font-family: St Ryde;">Bar Code/QR Code Verification</h2>
                  <p style=" color:white;">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  Ut fermentum justo sit amet risus.</p>
                  <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
              </div>
            </div>
            <br />
               </div> 
            <div class="container" style="background-color:white; margin-top:0%">
                <p style="color: red; margin-left: 2%; font-family: Lucida Sans Unicode; font-size: medium;">FEATURES</p>
                <br />
                <!--middle content-->
                <div class="container" style="margin-top: 0%;">
                    <div class="row">
                        <div class="col-md-6" style="margin-top: 3%;">
                            <img src="images/Toyota-2016-Lineup.png" class="image-fluid" width="450" />
                        </div>
                        <div class="col-md-6 text-left col-z-index">
                            <h1 class="title" style="font-size: medium; color: #200662; margin-top:3%; font-family: Co Headline Corp;">GET YOUR CAR(S) FULLY VERIFIED</h1>
                            <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            </h4>
                        </div>
                    </div>
                </div>
                <!--middle content end-->
                <!--middle content2-->
                <div class="container" style="margin-top: 0%;">
                    <div class="row">
                        <div class="col-md-6" style="margin-top: 3%;">
                            <img src="images/joscheck1.jpg" class="image-fluid" width="450" height="190" />
                        </div>
                        <div class="col-md-6 text-left col-z-index">
                            <h1 class="title" style="font-size: medium; color: #200662; margin-top:3%; font-family: Co Headline Corp;">GET YOUR PHONE(S) FULLY VERIFIED</h1>
                            <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            </h4>
                        </div>
                    </div>
                </div>
                <!--middle content2 end-->
                <!--middle content3-->
                <div class="container" style="margin-top: 0%;">
                    <div class="row">
                        <div class="col-md-6" style="margin-top: 2%;">
                            <img src="images/BarCode img.png" class="image-fluid" width="450" height="180" />
                        </div>
                        <div class="col-md-6 text-left col-z-index">
                            <h1 class="title" style="font-size: medium; color: #200662; margin-top:3%; font-family: Co Headline Corp;">GET YOUR PRODUCT(S) FULLY VERIFIED</h1>
                            <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            </h4>
                        </div>
                    </div>
                </div>
                <!--middle content3 end-->
            </div>
                </div>
            <footer class="container" style="background-color:black; width:auto; height:250px;">
                    <p class="pull-right"><a href="#" style="color: red;">Back to Top</a></p>
                    <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> &middot; <a href="About - 2.aspx" style="color: red;">About Us</a> &middot; <a href="#" style="color: red;">Contact</a> &middot</p>
                 <p style="color: gray; text-align:center; font-size:small; margin-top:3%;">Contact Address: Nigerian Merit Award House</p>
                <p  style="color: gray; text-align:center;font-size:small;">Maitama District Abuja, F.C.T</p>
                <p style="color: gray; text-align:center;font-size:small;">08138709222 08037445843 08023456781</p>
              <br /><br />
                <div style="float:right;"><asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebook-icon.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                          <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/twitter-icon.png" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink>
                          <asp:HyperLink ID="HyperLink3" runat="server" height="20" ImageUrl="~/images/gplus-32.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                         <asp:HyperLink ID="HyperLink4" runat="server" height="20" ImageUrl="~/images/linkedin-icon.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink></div>
                <br /><br /><p style="color:white;">Copyright &copy; 2020 Joscheck Tech. All Rights Reserved.</p>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    

    • Moved by CoolDadTx Tuesday, April 7, 2020 1:54 PM ASP.NET related
    Tuesday, April 7, 2020 10:34 AM

All replies

  • Hello,

    Your issues are not C# which this forum is for, instead post your question on the ASP.NET Forums.

    What I recommend is using Bootstrap 4 starting off with placing content in a div using container-fluid, this may help along with some other things that Bootstrap 4 has over Bootstrap 3. Bottom line do some research on responsive design and media breakpoints.

    See also http://bootstrap4.guide/


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange


    Tuesday, April 7, 2020 10:58 AM