Media Query BreakPoint on mobile not working - html

Question

I'm creating an email with the below breakpoints, but I'm having some difficulties with the breakpoints.
The breakpoint below is not working on mobile, actually I used this same breakpoints for another email and it was working perfectly.
<style style="" type="text/css">
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: 0 !important;
}
p {
margin: 0 !important;
padding: 0 !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
a {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
#media only screen and (max-width: 4ii80px) {
table[class="em_wrapper"] {
width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
table[class="em_main_table"] {
width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_aside"] {
padding: 0 10px !important;
}
}
#media only screen and (max-width: 480px) {
br[class="em_hide"],
span[class="em_hide"],
table[class="em_hide"],
td[class="em_hide"] {
display: none !important;
}
}
#media only screen and (max-width: 480px) {
img[class="em_full_img"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 480px) {
img[class="em_full_img1"] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_side"] {
width: 10px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_spc_20"] {
height: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_gap_bottom"] {
padding-bottom: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_height_25"] {
height: 25px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_f11"] {
font-size: 11px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_height_35"] {
height: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_text"] {
font-size: 18px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
table[class="em_wrapper"] {
width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
table[class="em_main_table"] {
width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_aside"] {
padding: 0 10px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
br[class="em_hide"],
span[class="em_hide"],
table[class="em_hide"],
td[class="em_hide"] {
display: none !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
img[class="em_full_img"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
img[class="em_full_img1"] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_side"] {
width: 10px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_spc_20"] {
height: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_gap_bottom"] {
padding-bottom: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_height_25"] {
height: 25px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_f11"] {
font-size: 11px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_height_35"] {
height: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_text"] {
font-size: 18px !important;
}
}
#media only screen and (max-width: 600px) {
.caption{
font-size: 20px !important;
color: red !important;
}
}
</style>

Answer 1

If you have mistakes like (max-width: 4ii80px) and certain constructions like [class="em_hide"], some email clients - particularly Gmail - will strip your entire <style> block. Use a CSS and HTML validator (there are plenty online), but ignore the warnings about deprecated code (HTML email uses a lot of deprecated code just fine).
Use https://www.caniemail.com/features/css-at-media/ to find out what you should expect.
Then also just use basic CSS selectors like .em_hide instead of [class="em_hide"].
I would also wrap the media queries in their own <style> block (yes you can have multiple), because some of the other things only apply to certain email clients, and Gmail doesn't like them. (For example Mso stuff only relates to Outlook desktop.)

Answer 2

The mistake was from the style tag
I typed instead of <style="" type="text/css">