Mobile design mode
Content moved. Please click here.
Notes for me:
You can only change 3 things: padding, alignment, and font-size.
They are seeing the “pill”
because they have applied a change to padding, alignment, or font-size - IN THE MOBILE VIEW - and these changes WILL be distinct from the Desktop view.
They are using hide-on.
If they are serious about this design,
I think they will need to have 2 separate button designs - because -
you can only customize so much with mobile-only edits
(the 3 things
1. padding, 2. alignment
these 2 are really about moving the position of the block and the space within the block itself
If they are trying to actually create
2 buttons on desktop
that are thicker with bigger font
2 buttons in mobile
that are thinner
with smaller font
They are limited in how much they can customize the button on mobile
(can only change the 3 things
they want to change the button shape (something mobile-only edits sort of indirectly do)
For instance, if they wanted to change the button color
they would need to design twice
one button for desktop, one button for mobile
because ONLY 3 THINGS (padding, alignment, and font-size)
can be applied to mobile WITHOUT affecting the desktop view -
they will be “mobile specific edits.”
In the docs:
Mobile Design Mode
You will see the “mobile pill” next to the 3 things (padding, alignment, and font-size)
highlighted when you know there is a mobile-ONLY style applied.
greyed out if off
to let the user know
it’s possible to apply
a mobile-only style
to that style.
If you hit the X,
it will revert to how the thing
(padding, alignment, or font-size)
is set in the
So - in this case…
1: I would like to ask what use case/situation are the client is running into: this appears to be an edge case test - their example JSON is not an actual, composed email.
2: Let’s say they do want to accomplish this design…
they want 1 bigger buttons in desktop, smaller ones in mobile.
There seems to be
in the button.
It looks correct in the stage
and in the final HTML.
How did they “design” the smaller/thinner button for mobile?
They reduced the line height
Something that is not in “the 3 things"
if you want this different between desktop/mobile - you need to design twice
They reduced the font size
IS in the 3 things
but it seems that the Plugin ALSO changes padding
when font size
is decreased - the Plugin resizes the button
(padding is indirectly changed)
Different content padding
not in the 3 things = you need 2 designs
The spacing in the button itself
the way they made the button smaller,
requires them to create 2 buttons - one for mobile, one for desktop.
They are correct in using "hide on" to accomplish this.
So why the extra button padding in Preview & final HTML?
Is one of the
properties not being transferred
into the code?
Is the “desktop padding” lingering?
Matt says when he recreates the button, it works (does not have the padding issue.)
But I can replicate the issue in this template: