How to use screen size display CSS inline?

HeatherThompson · ‎May 2, 2023

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:

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:

<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>

</div>

alyssamwilie · ‎May 3, 2023

@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>.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

alyssamwilie · ‎May 3, 2023

@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>.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HeatherThompson · ‎May 4, 2023

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

Jaycee_Lewis · ‎May 3, 2023

Hi, @HeatherThompson 👋 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

Jaycee Lewis

Developer Community Manager

Community | HubSpot

CMS Development