1 reply [Last post]
franck1972
franck1972's picture
Offline
newbie
Last seen: 14 weeks 4 days ago
Timezone: GMT+2
Joined: 2020-08-20
Posts: 1
Points: 2

Hello,

I have an issue displaying my website well on mobile phones. http://www.restaurantdesarenes.ch/arenes/pizza/

Despite the viewport tag which should do the trick, it's looking huge.

Some tags are apparently forcing the website to appear too big. Any idea which one I should remove or modify?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="max-width=645, initial-scale=0.86, maximum-scale=0.86">
<title>Vite une pizza</title>
 
<style>
 
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
 
}
 
 
.navbar {
  overflow: hidden;
  background-color: #000000;
  position: fixed;
  bottom: 0;
  width: 100%;
}
 
 
.main {
  padding: 0px;
  margin-bottom: 0px;
}
</style>
</head>
 
<body bgcolor="#000000" text="red">
 
 
<table width="655" border="0" bordercolor="#a00303" cellspacing="0" cellpadding="0" align="center" >
  <tr>
    <td align="center"><img src="titlebanner.jpg" width="655" height="143" /></td>
  </tr>
  <tr>    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center">
    <h2>
    Livraisons à domicile et
 
Vente à l’emporter !</h2>
 
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="30">&nbsp;</td>
        <td>
 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
 
    <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" >
  <tr>
    <td align="center"><a href="pizza.asp?item=pizza"><img src="pizzaimg.jpg" width="250" height="129" border="0"/></a></td>
  </tr>
</table>
 
 
    </td>
  </tr>
  <tr>
    <td align="center"><a href="pizza.asp?item=pizza"><img src="pizza.jpg" border="0" width="190" height="63" /></a></td>
  </tr>
</table>
 
 
        </td>
        <td width="60">&nbsp;</td>
        <td>
 
 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
 
    <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" >
  <tr>
    <td align="center"><a href="pizza.asp?item=pates"><img src="pastaimg.jpg" width="250" height="129" border="0" /></a></td>
  </tr>
</table>
 
 
    </td>
  </tr>
  <tr>
    <td align="center"><a href="pizza.asp?item=pates"><img src="pasta.jpg" width="190" height="63" border="0"/></a></td>
  </tr>
</table>
        </td>
        <td width="30">&nbsp;</td>
      </tr>
 
  <tr>
        <td width="30">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="60">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="30">&nbsp;</td>
      </tr>
 
  <tr>
        <td width="30">&nbsp;</td>
        <td>
 
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
 
    <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" >
  <tr>
    <td align="center"><a href="pizza.asp?item=boisson"><img src="boissonimg.jpg" width="250" height="129" border="0"/></a></td>
  </tr>
</table>
 
 
    </td>
  </tr>
  <tr>
    <td align="center"><a href="pizza.asp?item=boisson"><img src="boisson.jpg" width="256" height="63" border="0"/></a></td>
  </tr>
</table>
        </td>
        <td width="60">&nbsp;</td>
        <td>
 
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
 
    <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" >
  <tr>
    <td align="center"><a href="pizza.asp?item=salade"><img src="saladeimg.jpg" width="250" height="129" border="0"/></a></td>
  </tr>
</table>
 
 
    </td>
  </tr>
  <tr>
    <td align="center"><a href="pizza.asp?item=salade"><img src="salade.jpg" width="226" height="63" border="0"/></a></td>
  </tr>
</table>
 
        </td>
        <td width="30">&nbsp;</td>
      </tr>
 
 
 
  <tr>
        <td width="30">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="60">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="30">&nbsp;</td>
      </tr>
 
 
 
       <tr>
        <td width="30">&nbsp;</td>
        <td>
        <font color="red" size="4"><strong>
        Site Web : <a href="http://www.viteunepizza.ch" rel="nofollow">www.viteunepizza.ch</a><br /><br />
 
		Téléphone : 026 / 675 42 22<br /><br />
 
		Place de la foire 3 <br />1580 Avenches</strong>
        </font>
</td>
        <td width="60">&nbsp;</td>
        <td align="center"><img src="scooter.jpg" width="233" height="217" border="0" /></td>
        <td width="30">&nbsp;</td>
      </tr>
 
  <tr>
          </table>
 
 
    </td>
  </tr>
</table>
 
<br />
<br />
<br />
<br />
 
<div class="navbar">
<table width="655" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img src="menubar.jpg" width="655" height="97" usemap="#Map" border="0" /></td>
  </tr>
</table>
</div>
 
 
<map name="Map" id="Map">
  <area shape="rect" coords="213,9,392,92" href="info.asp" />
  <area shape="rect" coords="395,5,655,96" href="caddie.asp" />
</map>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Tables are not responsive

Um, the viewport attribute isn't about responsiveness, but is there to force certain mobile browsers to ignore their own buggy behavior. It should read like so:

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

Responsiveness is controlled in the stylesheet. In fact if you don't have tables and don't have pixel measures, simple html reflows to fit the user agent, i.e. it is automagically responsive.

But, you have used tables for layout, a practice made obsolete by 1999. The table is a special use case structure where the meaning of its content is determined by its relative position to other elements of the table. You have no content that fits that bill.

The only fix is to rewrite your pages without any tables and without any styling attributes. Then create a stylesheet that includes responsive instructions for display in various devices.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.