Fix overlapping max-width and min-width on media queries #2442
Conversation
|
I don't really get your issue as it was clearly intended to have those media queries to overlap here. Can you add some context ? |
|
I think it was made with the same value for min- and max-width out of convenience. Why would the rules for desktop and mobile apply both at the breakpoint? It's either desktop or mobile. The breakpoint being the width the mailing is created for I don't see why objects would already be supposed be displayed differently. |
|
Even if MJML is mobile first, both case of mj navbar and full width image media queries are targeted only for mobile. There’s the closest way to have a progressive enhancement without compromising desktop or mobile version.
… On 30 Mar 2022, at 09:04, Wanztwurst ***@***.***> wrote:
I think it was made with the same value for min- and max-width out of convenience. Why would the rules for desktop and mobile apply both at the breakpoint? It's either desktop or mobile. The breakpoint being the width the mailing is created for I don't see why objects would already be supposed be displayed differently.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.
|
|
Well I'm stupid. |
| @@ -1,5 +1,5 @@ | |||
| ## mj-breakpoint | |||
| This tag allows you to control on which breakpoint the layout should go desktop/mobile. | |||
| This tag allows you to control on which breakpoint the layout should go desktop/mobile. At window widths below this value the layout will be displayed in mobile mode. | |||
There was a problem hiding this comment.
I'm not sure we should add this in the doc here as everyone should be familiar enough with media queries and what a breakpoint mean. Can you remove this ?
There was a problem hiding this comment.
Sure, if it's too verbose.
The configured breakpoint is being used in the css media queries for the desktop
(min-width: breakpoint)and mobile(max-width: breakpoint). This causes the queries to overlap at the exact breakpoint size, e.g. 700px, and being active at the same time.These changes reduce the mobile breakpoint to
(max-width: breakpoint-1), so that the set breakpoint represents the smallest width for the desktop layout.