How to make my website fit any screen size?

Question

I designed my site within photoshop then used the slice tool and saved for web, I have tried. [Edit] To give everyone a little more detail here is my code. It is the auto formatted code from save for web option (not ideal i know) however I don't have dreamweaver so I have no clue how else to do it.

    
    
    Cocina On Market
    
    
    
    
     
     
     
     
        
             
   
        
            
     
    
        
             
   
        
            
                
        
            
        
            
      
      
        
             
    
        
            
                
        
             
    
        
            
                
        
             
     
        
            
                
        
             
     
        
            
    
    
        
             
   
        
            
    
    
        
             
    
        
             
     
        
            
    
    
        
             
      
        
            
     
     
        
             
      
        
            
                
        
            
        
            
                
        
             
     
        
            
    
    
        
             
       
        
            
                
        
             
      
        
            
    
    
        
            
        
            
        
             
      
        
            
     
     
        
            
                
        
            
        
            
        
            
                
        
            
        
            
        
            
                
        
            
        
            
       
       
        
            
        
            
        
            
        
            
        
      
        
       
       
       
`
body {  
padding: 0;
margin: 0;
}

div{
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 1000px;
margin: 0 auto;
}

` in css with no luck. any ideas? Here is a screenshot so you can see what I am talking about

user_10087397 · Answer

This should work for you:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}

div {
    width: 100vw;
    height: 100vh;
}

vw stands for viewport-width, that means 100% of what the user sees (in width). vh stands for viewport-height, the same thing but in height

user_6426817 · Answer

i think this is what you want

div {
  max-width: 768px;
  max-height: 1024px;
  margin: auto;
  display: block;
}

user_3130775 · Answer

Width of your main table (wrapper) is defined in this line:

You can change 1001 width to whatever you want like 2000 or 100%. However this type of coding (using tables) is not ideal, its an old and non standard approach in coding webpages. Try using a framework like bootstrap and optimize your code, its easy and provides responsive options for smaller devices.

user_8750873 · Answer

You can use vw and vh as width and height unit.

body{
    margin: 0;
}

div{
    width: 100vw;
    height: 100vh;
}

That should fit with any device.

Edit:

Noticed that You're trying to build a website with a table element. We don't usually so it that way.

width="1001" height="1100" is limiting the width and the height that's why the above solution vw, vhdoesn't work.

I suggest you to construct the website in div or other elements. Do not rely on Photoshop.

user_5645027 · Answer

You can try such way:

html, body {width: 100vw; height: 100vh;}
div {width: 100%; height: 100%}

I think it gonna work

How to make my website fit any screen size?

5 Answers