Floating callouts left or right helps to ensure they offer additional context without distracting from the main points and flow of an article.
However, on mobile screens these will often end up being too squished due to the lack of available screen-width.
To minimise this, we could add a callout adjustment which sets float: to unset if screenwidth is less than the mobile breakpoint. Keyword could be 'unset' for example. There are some situations where you would want an element to still float left or right even on mobile.
Alternatively, we could make unset the default behaviour for floating callouts, so they always switch to taking up the full screen-width on mobile. In fact, this might be better as it would require less hassle for editors when checking if a WIP article is readable on mobile. The optional callout adjustment would then be to essentially fix the callout in place, with a keyword like 'fixed' or 'set'
MasssiveJuice08
commented
2 weeks ago
Floating callouts left or right helps to ensure they offer additional context without distracting from the main points and flow of an article.
However, on mobile screens these will often end up being too squished due to the lack of available screen-width.
To minimise this, we could add a callout adjustment which sets
float:tounsetif screenwidth is less than the mobile breakpoint. Keyword could be 'unset' for example. There are some situations where you would want an element to still float left or right even on mobile.Alternatively, we could make
unsetthe default behaviour for floating callouts, so they always switch to taking up the full screen-width on mobile. In fact, this might be better as it would require less hassle for editors when checking if a WIP article is readable on mobile. The optional callout adjustment would then be to essentially fix the callout in place, with a keyword like 'fixed' or 'set'