How to use screen size display CSS inline?

Developer Support CMS Development
, , ,
1

Hi, I’m using drag and drop emails and have one tiny thing I need to tweak in an HTML module. Unfortunately, I’m not having luck finding the answer on StackOverflow.

I want an image to not display when the browser is below a certain width.

If I could edit the style header, this is what I would put:

<style>@media (max-width: 600px) {

#fadeshow1 { display: none; }

}</style>

and then this in the body:

<img src=“https://4733706.fs1.hubspotusercontent-na1.net/hubfs/4733706/top.png” style=“height: 100%; width: 100%;” id=“fadeshow1”>

How do I convert this media query to inline CSS for this img?
For context, this is the full div:

<div style=“background-image:url(https://4733706.fs1.hubspotusercontent-na1.net/hubfs/4733706/postcard2.png); height: 100%; background-size: contain; background-repeat: no-repeat;”>

<img src=“https://4733706.fs1.hubspotusercontent-na1.net/hubfs/4733706/top.png” id=“fadeshow1”>

<p style=“margin: 70px 0 90px 0; font-size: 36px; font-weight: bold; color: #426D60;” align=“center”><a href=“https://www.indicotravels.com” style=“text-decoration: none; color: #426D60;”>Welcome!</a></p>

<img src=“https://4733706.fs1.hubspotusercontent-na1.net/hubfs/4733706/top.png” id=“fadeshow1”>

</div>

2

Hi, @HeatherThompson :waving_hand: Thanks for reaching out. Let’s invite our community members to the conversation — hey @Anton @alyssamwilie, can you share any email-styling wisdom with @HeatherThompson?

Thank you! — Jaycee

3

@HeatherThompson Media queries cannot be inlined and gmail wipes out any <style> blocks that aren’t in the <head>. So, unfortantely, removing an element on mobile just isn’t possible cross-client with drag-and-drop email. I’ve got my fingers crossed that someday HubSpot will allow adding styles to the <head>.

4

that’s unfortunate but thank you for solving this for me!