CSS code for Custom HTML modules

[Rob3]

Hi,

First post and fairly dumb question as I'm not a coder - just a copywriter managing Hubspot for our client! 🐵

We've had a custom HTML header and footer designed for the client's standard email template. The HTML designer has included all css code within the main HTML file. The HTML is uploading fine to the template and works great in desktop view, but Hubspot is stripping out the CSS which specifies how to render in mobile view. Hubspot Tech Support said the CSS code should go in the 'Edit head' section, which we did but it didn't have the desired effect! Be glad of any possible steering on where CSS code related to Custom HTML modules should be inserted.

The CSS code that the HTML designer has created is as below. Be glad to know if there are missing elements from the code which are causing the problem.

Thanks a lot.

----------------------------------------

<style type="text/css">
body{-webkit-text-size-adjust:none; margin:0px !important;}
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}

tr, td {line-height:90%}

@media only screen and (max-width: 580px) {
*[class].yahoo_fix{display:block;}

*[class].fl{float:left !important;}
*[class].wr{display:block !important;}
*[class].h{display:none !important;}

*[class].border { margin:0px 3px 0px 3px !important}
*[class].no-bg{ background:none!important}
*[class].txt-center{ text-align:center!important}

*[class].width100per{width:100% !important;}
*[class].width15{width:15px !important;}
*[class].width135{width:135px !important;}
*[class].width260{width:260px !important;}
*[class].width270{width:270px !important;}
*[class].width300{width:300px !important;}

*[class].height2{height:2px !important;}
*[class].height10{height:10px !important;}
*[class].height15{height:15px !important;}
*[class].height20{height:20px !important;}

}

</style>

[Jsum]

@Rob3,

Can you share a preview link of the email? That css looks a little wierd to me.

Also media queries don't work in all email clients, depending on how you are previewing it the client may be the issue. Not a dumb question though.

[Rob3 · Accepted solution]

@Jsum 

Just to confirm that I've private messaged the preview link to you as it seems to cause the message to get cut out if I include it here on the topic conversation.

Thanks very much for your help.

[michaelawain]

Hello, did you manage to find a solution to this as I am having a similar problem... thankyou in advance!

[Rob3]

Hi - the solution was basically to engage the very helpful Jonathan (above) to correct the code from our standard HTML guy, which contained some errors. Hope you get your problem fixed!

[Rob3]

Hi @Jsum - thanks very much for your response. I've tried to reply a couple of times now and my replies seem to get cut out after I've sent them. Just going to try responding now without including the link and see if that stops the response from being deleted.