Responsive layout of html emails in gmail. How?

Question

css

Hi all!
Here I was puzzled by the layout of the html-mailing, which is buggy displayed in gmail. There's something like this:

@media screen and (max-device-width: 640px), screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3/2), screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.5), screen and (max-width: 767px) and (min-device-pixel-ratio: 1.5) {
     .desktopversion { display: none !important; }
     .mobileversion { display: block !important; float: none !important; width: 100% !important; height: auto !important; }
}

@media screen and (min-width: 641px) and (-webkit-max-device-pixel-ratio: 1.0), screen and (min-width: 641px) and (-o-max-device-pixel-ratio: 1/1), screen and (min-width: 641px) and (max--moz-device-pixel-ratio: 1.0), screen and (min-width: 641px) and (max-device-pixel-ratio: 1.0), screen and (min-width: 768px) {
     .desktopversion { display: block !important; }
     .mobileversion { display: none !important; }
}

Well, the blocks:

<div class="desktopversion" style="display: block;">
///
</div>

<!--[if !mso]> -->
<div class="mobileversion" style="display: none; float: left; width: 0; overflow: hidden;">
///
</div>
<!-- <![endif] -->

Blocks duplicate information, but the first desktop version is shown on large screens, and the mobile version is shown on small ones.
And everything would be fine, but gmail does not want to display correctly. Yes, it only shows one of the blocks (eg desktopversion), but for mobileversion it shows float: left; width: 0; overflow: hidden; due to which a large empty field of background color is displayed at the bottom of the letter. Other mailers draw blocks correctly. Is there any hack to make this work in gmail?

Answer 1

No way. Gmail (mobile client) does not support media queries.
Layout rubber tables, where possible.
PS: Letter layout designer, 5 years experience.
PPS: It means the most cross-platform solution.

Answer 2

Forget about two versions of the letter. Do one. rubber tables. The gmail app does not understand media queries. The link to my framework has already been given above. There is a letter template that you can turn around for understanding. Sergey Goryachev says everything correctly.

Answer 3

perhaps gmail uses important, while you understand your settings are ignored.