Display Issue

  • Thread starter Thread starter Donald Uko
  • Start date Start date
D

Donald Uko

Guest
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: Joscheck Search. 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="Facebook - Log In or Sign Up">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/twitter-icon.png" NavigateUrl="Microsoft - Official Home Page">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server" height="20" ImageUrl="~/images/gplus-32.png" NavigateUrl="Facebook - Log In or Sign Up">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server" height="20" ImageUrl="~/images/linkedin-icon.png" NavigateUrl="Facebook - Log In or Sign Up">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>

Continue reading...
 
Back
Top