CODEWITHSUNDEEP
htmlcss
BustyGerman
BustyGerman

Reputation: 39

How to make my website fit any screen size?

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.

    <html>
    <head>
    <title>Cocina On Market</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" 
     marginheight="0">
     <div>
     <center>
     <table id="Table_01" width="1001" height="1100" border="0" 
     cellpadding="0" cellspacing="0">
     <tr>
        <td colspan="20">
            <img src="images/index_01.gif" width="1000" height="4" alt=""> 
   </td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
     </tr>
    <tr>
        <td rowspan="10">
            <img src="images/index_02.gif" width="39" height="1096" alt=""> 
   </td>
        <td rowspan="4">
            <a href="index.html">
                <img src="images/logohome.gif" width="142" height="41" 
    border="0" alt=""></a></td>
        <td colspan="18">
            <img src="images/index_04.gif" width="819" height="9" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="9" alt=""></td>
      </tr>
      <tr>
        <td colspan="12" rowspan="4">
            <img src="images/index_05.gif" width="584" height="965" alt=""> 
    </td>
        <td rowspan="2">
            <a href="index.html">
                <img src="images/home.gif" width="54" height="25" border="0" 
     alt=""></a></td>
        <td rowspan="9">
            <img src="images/index_07.gif" width="13" height="1087" alt=""> 
    </td>
        <td rowspan="2">
            <a href="menu.html">
                <img src="images/menu.gif" width="54" height="25" border="0" 
     alt=""></a></td>
        <td rowspan="9">
            <img src="images/index_09.gif" width="14" height="1087" alt=""> 
     </td>
        <td>
            <a href="contact.html">
                <img src="images/contact.gif" width="80" height="22" 
     border="0" alt=""></a></td>
        <td rowspan="9">
            <img src="images/index_11.gif" width="20" height="1087" alt=""> 
     </td>
        <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
        <td rowspan="8">
            <img src="images/index_12.gif" width="80" height="1065" alt=""> 
   </td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td rowspan="7">
            <img src="images/index_13.gif" width="54" height="1062" alt=""> 
    </td>
        <td rowspan="7">
            <img src="images/index_14.gif" width="54" height="1062" alt=""> 
     </td>
        <td>
            <img src="images/spacer.gif" width="1" height="7" alt=""></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="images/index_15.gif" width="142" height="1055" alt=""> 
      </td>
        <td>
            <img src="images/spacer.gif" width="1" height="933" alt=""></td>
     </tr>
     <tr>
        <td rowspan="5">
            <img src="images/index_16.gif" width="178" height="122" alt=""> 
      </td>
        <td colspan="2" rowspan="2">
            <a href="index.html">
                <img src="images/footerhome.gif" width="81" height="23" 
      border="0" alt=""></a></td>
        <td colspan="5">
            <img src="images/index_18.gif" width="107" height="2" alt=""></td>
        <td colspan="3" rowspan="2">
            <a href="contact.html">
                <img src="images/footercontact.gif" width="111" height="23" 
      border="0" alt=""></a></td>
        <td rowspan="5">
            <img src="images/index_20.gif" width="107" height="122" alt=""> 
     </td>
        <td>
            <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="images/index_21.gif" width="16" height="120" alt=""> 
       </td>
        <td colspan="3">
            <a href="menu.html">
                <img src="images/footermenu.gif" width="72" height="21" 
      border="0" alt=""></a></td>
        <td rowspan="4">
            <img src="images/index_23.gif" width="19" height="120" alt=""> 
      </td>
        <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/index_24.gif" width="81" height="25" alt=""></td>
        <td colspan="3">
            <img src="images/index_25.gif" width="72" height="25" alt=""></td>
        <td colspan="3">
            <img src="images/index_26.gif" width="111" height="25" alt=""> 
      </td>
        <td>
            <img src="images/spacer.gif" width="1" height="25" alt=""></td>
     </tr>
     <tr>
        <td>
            <a href="https://www.facebook.com/cocinaonmarket">
                <img src="images/facebook.gif" width="34" height="25" 
      border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="images/index_28.gif" width="47" height="74" alt=""></td>
        <td rowspan="2">
            <img src="images/index_29.gif" width="22" height="74" alt=""></td>
        <td>
            <a href="https://www.instagram.com/cocinaonmarket">
                <img src="images/instagram.gif" width="25" height="25" 
       border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="images/index_31.gif" width="25" height="74" alt=""></td>
        <td rowspan="2">
            <img src="images/index_32.gif" width="45" height="74" alt=""></td>
        <td>
            <a href="https://www.twitter.com/cocinaonmarket">
                <img src="images/twitter.gif" width="38" height="25" 
       border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="images/index_34.gif" width="28" height="74" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="25" alt=""></td>
       </tr>
       <tr>
        <td>
            <img src="images/index_35.gif" width="34" height="49" alt=""></td>
        <td>
            <img src="images/index_36.gif" width="25" height="49" alt=""></td>
        <td>
            <img src="images/index_37.gif" width="38" height="49" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="49" alt=""></td>
        </tr>
      </table>
        </center>
       </div>
       </body>
       </html>
`
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

Upvotes: 2

Views: 61003

Answers (6)

Muhamed Ajdinoski
Muhamed Ajdinoski

Reputation: 1

  1. In <head></head> insert <meta> tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. Make body's viewport (vh and vw) width and height to 100:

    width=100vw; height=100vh;

  3. add div with root id to css element too:

    #root

body,
#root {
  width: 100vw;
  height: 100vh;
  margin: auto;
  padding: auto;
  background-color: red;
}

#root {
 background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <title>Website Fits Whole Display</title>
  </head>

  <body>
    <div id="root">TEST</div>
  </body>
</html>

Upvotes: -1

Ali
Ali

Reputation: 152

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

<table id="Table_01" width="1001" height="1100" border="0" cellpadding="0" cellspacing="0">

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.

Upvotes: 0

blackcityhenry
blackcityhenry

Reputation: 727

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.

Upvotes: 0

codeWithMe
codeWithMe

Reputation: 892

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

Upvotes: 3

Ivan A
Ivan A

Reputation: 293

You can try such way:

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

I think it gonna work

Upvotes: 0

HuntsMan
HuntsMan

Reputation: 792

i think this is what you want

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

Upvotes: 1

Related Questions