Need help with responsive web design.

+5 Abdullah Nauman · November 30, 2014
Hey guys, I am making an app, with HTML, CSS, and JavaScript. And then compiling it via PhoneGap Build. But I am having a problem with the div's adjusting to screen size. Usually when I use percentages, I get size adjusting div's.I am only up to the size menu. I'm really confused please help. :(  Below is my code.
<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" href="layout.css">
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>


</script>
<style type="text/css">
</style>


</head>
<body> 

 <div id = "sideBar" style=" width: 10%; height: 100%;  background-color: rgba(0,0,0,0.5);">
<div style="width:75%; height:7%; background-color: green;border: 1px solid white; border-radius: 50%;  margin-top: 40%;  margin-left: 7%; "></div> 
<div style=" width:75%; height:7%; background-color: green;border: 1px solid white; border-radius: 50%;  margin-top: 40%;  margin-left: 7%;  "></div> 
<div style=" width:75%; height:7%; background-color: green;border: 1px solid white; border-radius: 50%;  margin-top: 40%;  margin-left: 7%;  "></div> 
<div style=" width:75%; height:7%; background-color: green;border: 1px solid white; border-radius: 50%;  margin-top: 40%;  margin-left: 7%;  "></div> 
 </div> 

</body>
</html>
   

Post a Reply

Replies

Oldest  Newest  Rating
+1 akash jaggi · December 5, 2014
bro  ... u dont do that ...  

<div style="width:75%; height:7%; background-color: green;border: 1px solid white; border-radius: 50%; margin-top: 40%; margin-left: 7%; "></div>


Please Used External Style Sheet ,,, and ten after used .. media query ....
 Do that :

              Here is your original code Example :
 #header
    {
      width:100%;
      margin-right: auto;
      margin-top: 0px;
      margin-left:auto;
    }

              Here is your After Using Media Query code Example :

@media screen and (max-width: 1100px)
{
    #header
    {
      width: 100%;
      height: 100px;
    }

 if you need more help then mail me .....i will help u... ... by sending some example code responsive designs....

akash@akashproduction.in 

Hope You Want To know More .... Be happy Coding
+1 Abdullah Nauman · June 19, 2015
Thanks Akashi. That solved it!
+1 Kenneth Malicay · June 20, 2015
Bucky made a tutorial on bootstrap which might be a solution to your problem or an addition to your web designing skills.
0 Theodore Rees · November 30, 2014
I'm kinda new to web programming and use it strictly for a hobby but I'll try and help you figure this out. First off, what are the identifiers for the div tags inside the sidebar? Secondly, why do you have four lone div tags inside said sidebar?
0 Manu Yadav · December 1, 2014
Hi 

shanzi is right you use media query 
0 Abdullah Nauman · June 20, 2015
Yes, thank you. This is an extreamly old post by the way. My web development skills are a lot better now. :)
0 Tsin Fung Johnny Lam · December 1, 2014
Dun know if this stuff is helpful to you...
http://ionicframework.com/getting-started/
0 Abdullah Nauman · December 2, 2014
I will definitely be looking more at the ionic framework (thx Tsin!). I am also gonna look in to media query. Thx guys. 
0 Krankens Signs · June 29, 2015
Responsive Web Design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.
0 shanzi own · November 30, 2014
maybe you can try using media query
  • 1

HTML / CSS / Web Design

106,950 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators