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.
<!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>

Open in new window



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;
  }
}

Open in new window


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
LVL 1
Bharath A.KAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Provide a live link or Jsfiddle that will be easier for us to help you.

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
0
Bharath A.KAuthor Commented:
Hi Lenamtl,

Jsfiddle url is

https://jsfiddle.net/ak_bharath/umcxpdvg/2/

with many thanks,

Bharath AK
0
Bharath A.KAuthor Commented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lenamtlCommented:
Yes there are layout problems

First when using Bootstrap and responsive you should not use inline CSS
for example you have a box that have inline css, instead use Bootstrap helper or add css directly in your CSS file
<div id="box" class="row" style="Text-Align:center">

Open in new window


Here are the helper for text aligment
https://getbootstrap.com/docs/4.0/utilities/text/

By using background cover this can be tricky and will required a lot of tests and by experience rarely show correctly.
For your banner or image you can use class="img-fluid"
https://getbootstrap.com/docs/4.0/content/images/

Just after the body you have a container but you close it right a way so the container is empty and not containing your page content
 <div class="container-fluid">
	<div>

Open in new window


For height and width always good to use % or max-height or min-height.

Use row and col or other Bootstrap container for every part or the page to ensure this will be responsive, you have content that are not in Bootstrap container .

So the page should have a main wrapper container and each section must have a container too, so this way everything will resized correctly.
You won't need much custom media query as Bootstrap have already a lot of them, you just need to use it.

I would not use a stroke around the page...

For boxes you can use card
https://getbootstrap.com/docs/4.1/components/card/

Like I suggested you in my previous message, you can take free Udemy course and this will give you everything you need to revised your page and create new one quickly.

Or you can buy cheap template this help a lot to learn by having professional code https://themeforest.net/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bharath A.KAuthor Commented:
Hi Lenamtl,

Thanks for providing me lots of best practices for using bootstrap.

Regards,

Bharath AK
0
Bharath A.KAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
css3

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.