coder
asked on
Not able to make the webpage responsive (for mobile and tablets views)
Hi Experts,
I had created a web page. For the webpage to be responsive, I had included media queries. The page is okay in desktop but not in mobile views and tablet views.
Usually, I have to scroll horizontally to see the complete page in mobile and tablets view. I think scrolling horizontally on mobile and tablet views are not correct. I had seen sample responsive pages where the scrolling happens only vertically, we need not scroll horizontally for mobile and tablet pages. I had attached the web page code as zip as well as pasted code for the html and css file.
the css code is as follows
Please help me in making this page responsive and suggest me the best practices and please confirm whether my media queries breaking points are correct. I had taken the media query breakpoints from googling. I am checking my mobile and tablets view using chrome developer tools.
With Many Thanks,
Bharath AK
ezproxy.zip
I had created a web page. For the webpage to be responsive, I had included media queries. The page is okay in desktop but not in mobile views and tablet views.
Usually, I have to scroll horizontally to see the complete page in mobile and tablets view. I think scrolling horizontally on mobile and tablet views are not correct. I had seen sample responsive pages where the scrolling happens only vertically, we need not scroll horizontally for mobile and tablet pages. I had attached the web page code as zip as well as pasted code for the html and css file.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Ez proxy</title>
</head>
<body>
<div class="container-fluid">
<div>
<div id="mybanner">
</div>
<div id="box" class="row" style="Text-Align:center">
<div class="card border-success col-xs-11 col-sm-11 col-md-5 col-lg-3" style="width: 15rem;">
<p><span><strong>Access these resources at Northern Territory Library<br>No Login required</strong></span></p>
<ul>
<li><a href="https://ntln.idm.oclc.org/login?=url=https://ancestrylibrary.proquest.com"><strong><i>Ancestry Library Edition</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=https://www.pressreader.com"><strong><i>Pressreader</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=6500121359"><strong><i>SAI Global onsite</i></strong></a></li>
</ul>
</div>
<div class="card border-success col-xs-11 col-sm-11 col-md-5 col-lg-3" style="width: 15rem;">
<p><span><strong>Log into these resources anywhere, anytime with your public library membership</strong></span></p>
<ul>
<li><a href="https://ntln.idm.oclc.org/sso/bol"><strong><i>Bolinda downloadable ebooks and e-audiobooks</i></strong></a></li>
<li><a href="https://www.rbdigital.com/northernterritory/zinio"><strong><i>RB Digital Magazines</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=http://www.pressreader.com"><strong><i>Pressreader</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=7578676713"><strong><i>SAI Global offsite</i></strong></a></li>
<li><a href="https://www-busythings-co-uk.ntln.idm.oclc.org/play/?ipid=15403&token=76b389180886d1b5e63f83d81a66dbd0cb0f78201a5756272e0eaaf3c575016b"><strong><i>Busy things</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=http://infotrac.galegroup.com/itweb/ntlis?db=TTDA"><strong><i>The Times Digital Archive</i></strong></a></li>
</ul>
</div>
<div class="card border-success col-xs-11 col-sm-11 col-md-10 col-lg-3" style="width: 15rem;">
<p><span><strong>Access these resources at<br>your public library <br>No Login required</strong></span></p>
<ul>
<li><a href="https://ntln.idm.oclc.org/login?url=http://www.pressreader.com"><strong><i>Pressreader</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=6500121359"><strong><i>SAI Global onsite</i></strong></a></li>
<li><a href="https://www-busythings-co-uk.ntln.idm.oclc.org/play/?ipid=15403&token=76b389180886d1b5e63f83d81a66dbd0cb0f78201a5756272e0eaaf3c575016b"><strong><i>Busy things</i></strong></a></li>
<li><a href="https://ntln.idm.oclc.org/login?url=http://infotrac.galegroup.com/itweb/ntlis?db=TTDA"><strong><i>The Times Digital Archive</i></strong></a></li>
</ul>
</div>
</div>
<div>
<p><span>If you need any assistance accessing these resources, please <a href="https://nt.gov.au/leisure/arts-culture-heritage/find-a-library-in-the-nt">contact your local library.</a></span></p>
</div>
<form class="row col-sm-11 col-md-11 col-lg-11" id="search-footer" action="https://librariesnt.on.worldcat.org/search?databaseList=" method="get">
<div id="searchlogo">
<img src="images/searchlogo.png"/>
</div>
<div id="group">
<label>Search for Articles from online databases<br>through Discover LibrariesNT</label>
<input type="search" name="queryString" title="search Query">
</div>
<div id="searchbtn">
<input type="submit" class="btn btn-primary" id="search" value="Search">
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
the css code is as follows
#mybanner {
background-image: url('../images/banner.png');
background-size: cover;
text-align:center;
margin:2% auto;
height:35%;
width:65%;
min-height:220px;
}
html {
height:100%;
min-height:100%;
}
body{
height:100%;
}
div .container-fluid{
height:auto;
min-height:100%;
overflow:auto;
}
.container-fluid{
width: 75%;
height:98%;
box-sizing: content-box;
border-style: solid;
border:3px solid #32CD32;
border-radius:25px;
display:table;
overflow:hidden;
margin: 25px auto;
text-align:center;
}
#box{
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-direction:row;
}
li {
list-style-type: none;
margin: 0 auto; /* Added */
float: none;
}
ul {
margin: 0 auto; /* Added */
float: none;
padding:0px;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
min-height:270px;
margin-top: 2%;
margin-left: 1%;
margin-right:1%;
margin-bottom:2%;
padding-bottom:2%;
padding-top:3%;
justify-content:center;
display:table-cell;
border-radius:15px;
border:3px solid;
}
#search{
text-align:center;
margin-right:30px;
width:125px;
margin-top:0px;
height:60px;
}
#searchlogo {
height:70px;
padding-top:25px;
}
input {
display:block;
width: 350px;
}
p{
text-align:center;
}
#search-footer{
margin-top:10px;
margin-left:auto;
margin-right:auto;
max-width:730px;
margin:auto;
padding-top:30px;
padding-bottom:20px;
}
#search-group {
margin-left:0px;
width:600px;
}
#group {
margin-left:25px;
text-align:left;
}
button {
height:40px;
}
label {
text-align:left;
}
#searchbtn {
width:75px;
margin-left:10px;
margin-top:25px;
}
@media only screen and (min-width: 320px) and (max-width: 479px){
#mybanner {
background-image: url('../images/banner_mobile.png');
background-size: cover;
min-width:250px;
height:140px;
margin:0;
}
#searchlogo{
padding-top:0px;
margin-left:20px;
}
#search{
height:40px;
margin-left:15px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
#mybanner {
background-image: url('../images/banner_tablet.png');
background-size: cover;
min-width:300px;
height:140px;
margin:0px ;
}
#searchlogo{
padding-top:0px;
margin-left:20px;
}
#search{
height:40px;
margin-left:15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
#mybanner {
background-image: url('../images/banner_tablet.png');
background-size: cover;
/*min-width:300px;*/
width:85%;
height:140px;
margin-top:20px ;
margin-bottom:20px;
padding-left:20px;
}
}
#searchlogo{
padding-top:0px;
margin-left:20px;
}
#search{
width:110px;
}
}
Please help me in making this page responsive and suggest me the best practices and please confirm whether my media queries breaking points are correct. I had taken the media query breakpoints from googling. I am checking my mobile and tablets view using chrome developer tools.
With Many Thanks,
Bharath AK
ezproxy.zip
ASKER
Hi Lenamtl,
Jsfiddle url is
https://jsfiddle.net/ak_bharath/umcxpdvg/2/
with many thanks,
Bharath AK
Jsfiddle url is
https://jsfiddle.net/ak_bharath/umcxpdvg/2/
with many thanks,
Bharath AK
ASKER
Hi Lenamtl,
My html on mobile view I have scroll horizontally both left and right to see the complete page. But in the above bootstrap examples, there is no need to scroll horizontally (left and right) you just scroll top and bottom to see the page. Hence I feel there is something wrong with my web page.
With Many thanks,
Bharath AK
My html on mobile view I have scroll horizontally both left and right to see the complete page. But in the above bootstrap examples, there is no need to scroll horizontally (left and right) you just scroll top and bottom to see the page. Hence I feel there is something wrong with my web page.
With Many thanks,
Bharath AK
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Lenamtl,
Thanks for providing me lots of best practices for using bootstrap.
Regards,
Bharath AK
Thanks for providing me lots of best practices for using bootstrap.
Regards,
Bharath AK
ASKER
Hi Lenamtl,
The problem is I was using display:table and display tabel-cell in parent and child elements, that was causing problem in mobile screen.
Thanks for providing the lots of best practices for using bootstrap.
Bharath AK
The problem is I was using display:table and display tabel-cell in parent and child elements, that was causing problem in mobile screen.
Thanks for providing the lots of best practices for using bootstrap.
Bharath AK
What I would recommend is to read the documentation
https://getbootstrap.com/docs/4.1/getting-started/introduction/
https://getbootstrap.com/docs/4.1/layout/overview/
https://getbootstrap.com/docs/4.1/layout/grid/
Do some tests using the provided examples
https://getbootstrap.com/docs/4.1/examples/
There are fee Udemy courses on Bootstrap 4 that will help you to learn it faster.
https://www.udemy.com/courses/search/?q=bootstrap%204&src=sac&kw=bootstra&p=1&price=price-free