Mobile design mode

Content moved. Please click here.

https://growens.atlassian.net/browse/BMP-339

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
3. font-size

If they are trying to actually create
2 buttons on desktop
that are thicker with bigger font
and
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
desktop view.

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
lingering padding
in the button.

It looks correct in the stage
but incorrect
when Previewed
and in the final HTML.

How did they “design” the smaller/thinner button for mobile?

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

2. 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)

3. Different content padding
   not in the 3 things = you need 2 designs
   The spacing in the button itself

The point:
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?

1. Is one of the
   desktop/mobile/mobile-specific
   properties not being transferred
   into the code?

2. 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: