Questions answered by this recipe
How can I improve "floating" wikistyles (rfloat, lfloat, rframe, lframe) on small screens?
Description
Improve the way float wikistyles (rfloat, lfloat, rframe, lframe) work on small screens.
On a small screen or mobile device, floated page elements can become too wide and crowd out neighboring text. This recipe makes floats behave better on small screens.
Installation
Config File
Add the following to your config.php file:
$HTMLStylesFmt['responsivefloat'] = '
.lfloat, .rfloat { max-width:50%; margin-bottom:2px; }
';
Alternatively you can use media queries for normal behavior on large screens where floats don't tend to crowd out neighboring text. (Two extra lines.)
$HTMLStylesFmt['responsivefloat'] = '
.lfloat, .rfloat { max-width:50%; margin-bottom:2px; }
@media (min-width:55em) {
.lfloat, .rfloat { max-width:none; margin-bottom:0; } }
';
Adjust the min-width (55) and max-width (100%) values to taste. Sometimes "max-width:100%" will work better.
Local CSS File
Add the to your local CSS stylesheet. (You may need to create one.)
/* Floats leave room for neighboring text on small screens */
.lfloat, .rfloat { max-width:50%; margin-bottom:2px; }
/* Floats leave room for neighboring text on small screens */
.lfloat, .rfloat { max-width:50%; margin-bottom:2px; }
@media (min-width:55em) {
.lfloat, .rfloat { max-width:100%; margin-bottom:0; }
}
Again, adjust the min-width value to taste.
Configuration
If it works, it just works. You may want to adjust the min-width value if you use media queries (@media (min-width:55em) {).
Notes
Effectiveness will be skin-dependent.
Change log / Release notes
- 2016-09-15 - Initial release
See also
Contributors
Comments
See discussion at ResponiveFloats-Talk?