Not able to make the webpage responsive (for mobile and tablets views)

coder
coder used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
coderdeveloper

Author

Commented:
Hi Lenamtl,

Jsfiddle url is

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

with many thanks,

Bharath AK
coderdeveloper

Author

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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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/
coderdeveloper

Author

Commented:
Hi Lenamtl,

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

Regards,

Bharath AK
coderdeveloper

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial