CODEWITHSUNDEEP
htmlcss
sudh
sudh

Reputation: 1

Problem with layout in website

I built a website. I used liquid layout for all the div tags. And its working fine. The problem i face is when i reduce the screen resolution to 800*600 from 1024*768 the text size isn't reducing ;the text in one div is overlapping with text in another div. I mentioned the size of text in pixel. Could anyone tell me how to solve the problem.

Upvotes: 0

Views: 113

Answers (3)

jlmakes
jlmakes

Reputation: 2965

Check out Javascript's window.screen usage; you should be able to detect their resolution, and execute a function to set the starting font size. I'm not a Javascript master, but it'd look something like...

document.onload = initTextSize;

function initTextSize() {
    var width = screen.width;
    var height = screen.height;

    if(width<=800 && height<=600) {
         document.getElementByTagName("head").innerHTML('<style type="text/css">body { font-size : 1em; }</style>');
    }
    else if(width<=1024 && height<=768) {
         document.getElementByTagName("head").innerHTML('<style type="text/css">body { font-size : 1.6em; }</style>');
    }

}

I know you could do it with a switch/case function too, but this is just my rough estimation of how you'd go about it with Javascript. I think innerHTML replaces the content (at least in some browsers,) while you'd want to append the new content to your existing stylesheet.

Plus, you might want to account for screen size changes--or who knows... on document load might not be the best way to call the function, but this should point you in the right direction.

Upvotes: 0

Ben
Ben

Reputation: 321

If the problem is your text NOT shrinking; simply add some JavaScript functionality to reduce the text size as the window shrinks. If you HAVE to do this for your website to work properly then, dude, redesign the website...

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

The text size won't reduce with the scale of it's container. You can set overflow: auto; on this container, and it will scroll the content inside of it (when it doesn't fit) instead of letting it overlap.

Upvotes: 1

Related Questions