Link to home
Start Free TrialLog in
Avatar of coder
coderFlag for Australia

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.
<!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
Avatar of lenamtl
lenamtl
Flag of Canada image

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
Avatar of coder

ASKER

Hi Lenamtl,

Jsfiddle url is

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

with many thanks,

Bharath AK
Avatar of coder

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
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of coder

ASKER

Hi Lenamtl,

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

Regards,

Bharath AK
Avatar of coder

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