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;
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.
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?
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%.