CODEWITHSUNDEEP
cssmedia-queries
G. Weisz
G. Weisz

Reputation: 37

@media code dosn't seem to work in Chrome

I have the following code, I would like the cells to collapse when the screen's width is less than a specific figure.

Normally I am used to having problems with IE, but in this case both IE and Firefox work well, it's Chrome which wouldn't react to that I'm trying to do.

Any ideas?

My code is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  @media screen and (max-width: 432px) {
    .dynTd {display: block;}
  }
</style>

</head>

  <table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
    <tr>
	  <td style="vertical-align: top">
		<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
      </td>
      <td style="vertical-align: top; display: block;">
	    <span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
		  <div style="font-size: 5px;">&nbsp;</div>
		  <span>Title</span>
		  <div style="font-size: 10px;">&nbsp;</div>
			<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
			<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
			<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>[email protected]</span><br>
		  <div style="font-size: 12px;">&nbsp;</div>
      </td>
      <td class="dynTd" style="width: 12px;"></td>
      <td class="dynTd" style="vertical-align: top;">
	    <img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
		<div style="font-size: 8px;">&nbsp;</div>
		Company Name<br>
		Company Address<br>
		Zip code and City<br>
		<div style="font-size: 5px;">&nbsp;</div>
		<a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a>
	  </td>
	</tr>
  </table>

</html>

Upvotes: 0

Views: 86

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

Turning a td into a block while leaving the tr as is will cause the browsers to compensate - according to the Tables specification,

If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.

And the td elements with display:block are not 'table-cell's anymore!
Therefore, the browsers create such an anonymous table-cell. And apparently, Chrome does so in a different way than FF and IE.

The solution is to make sure this does not happen; for instance to turn all the elements in the table into blocks so that no anonymous table-cells are needed.

@media screen and (max-width: 432px) {
  table, tr, td {display: block;}
}
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
  <tr>
    <td style="vertical-align: top">
      <img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
    </td>
    <td style="vertical-align: top; display: block;">
      <span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
      <div style="font-size: 5px;">&nbsp;</div>
      <span>Title</span>
      <div style="font-size: 10px;">&nbsp;</div>
      <span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
      <span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
      <span style="color:#eb6909;font-size:10px;">MAIL</span> <span>[email protected]</span><br>
      <div style="font-size: 12px;">&nbsp;</div>
    </td>
    <td class="dynTd" style="width: 12px;"></td>
    <td class="dynTd" style="vertical-align: top;">
      <img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
      <div style="font-size: 8px;">&nbsp;</div>
      Company Name<br> Company Address<br> Zip code and City<br>
      <div style="font-size: 5px;">&nbsp;</div>
      <a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a>
    </td>
  </tr>
</table>

This will look the same in all browsers. The you can work towards a way to make it look the way you want again...

Upvotes: 1

Related Questions