CODEWITHSUNDEEP
javascriptjqueryhtmlcss
OzZie
OzZie

Reputation: 523

auto resizing web page according-to-screen-resolution

i have a web page which looks great on 22" monitor but on laptop looks awful ...I would like to know if is any possibility to make it resizable for all type of screens ...I have tryed table function in js,width 100% in css ...I require some help :( heres a fiddle : http://jsfiddle.net/ygaw2/43/ and some code :

function submit()
{
    var dropspot_elements = document.getElementById("dropspot").children;
    var dropspot_stringOfElementIDs =[];

    for(var i = 0; i < dropspot_elements.length; i++)
    {
        dropspot_stringOfElementIDs.push(dropspot_elements[i].id);  
    }

    if(dropspot_stringOfElementIDs.join("")===document.getElementById("container").children[imgNumber-1].id  )
    {       
        if(imgNumber < 5)                
                alert('CORECT! Puteți trece la secvența următoare.');
                else
                alert('Felicitări,ați ghicit toate răspunsurile.Jocul a luat sfârșit!');   
                levelDone = true;    
    }
    else 
    {  
                if(dropspot_stringOfElementIDs.length===0){
                    alert('Nu ați incercat nici un răspuns.Trageți litere pentru a forma cuvântul ce reprezintă imaginea.');
                }
                else
                alert('GRESIT! Încercați din nou.');
                $("#dropspot").empty();
        }
    }

Upvotes: 1

Views: 3954

Answers (2)

EasyPush
EasyPush

Reputation: 776

Something very helpful here is CSS3 Media Queries. It lets you apply different styles based on properties of the device viewing the page. So you could apply different styles based on for example the screen width of the device viewing the page. This is nicely described here:

http://webdesignerwall.com/tutorials/css3-media-queries

Upvotes: 1

Tim B
Tim B

Reputation: 41168

You should look at how frameworks like Bootstrap handle this. They re-size elements and even adjust the flow of the page dynamically to make everything fit.

http://getbootstrap.com/

In particular the resizing, gridding etc and mobile first approach might be interesting for you:

http://getbootstrap.com/css/#overview

You will be better off using a framework like this (there are plenty of alternatives too) rather than trying to recreate it yourself.

Upvotes: 1

Related Questions