danmindru/responsive-html-email-signature

Question about Gmail signature - How do you add responsiveness? (<head> is missing)

Open

#89 opened on Oct 15, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)HTML (754 stars) (232 forks)batch import
email-client-issuehelp wantedquestion

Description

Sorry for this noob question,

but I'm struggling to understand how you can add the Gmail signature with this package. It's unfortunately not responsive.

I think I'm doing it maybe wrong?

After calling npm start, I open my file e.g. signature-light.html. I select all of the visible windows (not the code) and copy it and I create a new signature in Gmail while pasting the content of my copy.

However, if I look at my test mail, I see that the most important part is missing. There is no @media only screen and (max-width:480px)

Contributor guide

Tech stack
htmlcss
Domain
frontend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
HTML email basicsCSS media queries
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate how the template generator includes responsive styles. Check if the generated HTML contains a <style> block with @media queries and if they are properly copied when pasting into Gmail. Look at the package's source code, particularly the template files and build process, to understand how CSS is embedded. Also review Gmail's support for embedded styles in signatures.