Responsive width not working

HTML-CSS
#1

My webpage doesn’t have responsive width. When I make the browser smaller, the #text and #main divs don’t fill up 100% of the width and the background-color for the body is visible instead. A scrollbar appears and on the right side there is the background-color of the body tag for a width of about 40 pixels.
HERE IS MY CSS;

* { 
    margin: 0 !important;
    padding: 0 !important;
}

html {

text-align: center;	
max-width: 100%;
 }

body {
background-color: #65ff00; 
margin: 0 auto !important;
text-align: center; 
padding: 0 !important;
max-width: 100%;
height: 100vh;
}


#main {
height: auto;
background-color: #1F546F;
margin: 0 auto !important;
padding: 0!important;
text-align: center;
min-height:100vh;
width: auto !important;
}

#text {
	 position:relative;
display:inline-block; 
margin: 0px auto;
padding: 10px 80px;
background-color: #1F546F;
max-width: 90%;
text-align: left; 
}

HERE IS MY HTML:


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Website Name</title> 
<link rel="stylesheet" type="text/css" media="all" href="../stylesheets/kicks_style.css" title="default" />
</head>
<body>
<div id="main">
<!--NAVIGATION-->
<div id="text">
lorem ipsum
</div><!--end of text div -->

</div><!--end of main div-->
<div id="footer">
</div><!--end of footer div -->
</body>
</html>
#2

The content of the divs contains several tables. I think perhaps the tables are exceeding the width of the viewport.

#3

I added


table 
{
    table-layout:fixed;
    width:100%;
}

and the tables stay inside of the #text div but there is still a margin on the right side for small viewports.

#4

To see the way you have them styled add the following line to #main and #text;
border: solid 1px red (maybe add green to the second one instead of red)

Any reason you’re not using HTML5? (<!DOCTYPE html>)

It’s easier if you provide a pen so that people don’t have to cut/paste your code.

#5

Actually I already did add borders to my divs, I just didn’t post them in the text box. I will add a codepen tomorrow.

#6

I added word-break: break-all; to the #main div and now my page works!

#7 
#text {
text-align: left; 
}

table 
{ margin: 0px auto;
text-align: center;}

My tables are in the #text div and they’re not centered. How do I center my tables?

#8

I have a bunch of tooltips on the page. The HTML looks like this:


<div id="t1" class="tip">trunk reverse punch ?The sides of the forward leg and the punching arm are the same. - <span class="fatblack">momtong pandae chirugi</span></div>
<div id="t3" class="tip">parallel stance - <span class="fatblack">naranhi sogi</span></div> 
<div id="t4" class="tip">left/right front stance, walking stance - <span class="fatblack">oen /orun ap sogi</span></div>

Now when I make the browser more narrow, the tooltips cause the page to have a wide right margin and the #text div doesn’t expand to reach the right side all the way. When I comment out the tooltips, the problem disappears. How should I style my tooltips so that they don’t cause a large right margin?

#9

Codepen of tooltip problem here:

If you make the browser smaller, you will see that the lime green background-color of the body tag takes up half the screen and the #text div doesn’t fill up the viewport width.

Also a problem is when I use table-layout: fixed; for the tables the width of the table cell doesn’t work. I have

table.geuk td.stance {
width: 10%; 
}

but the table cells with a class of stance take up 33% of the table and not 10%.

#10

I already fixed this problem several days ago. I just forgot to reply here.

#11

I just made the tooltips width 10% for smaller viewport widths and that fixed the problem.

#12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.