Responsive/mobile: remove floats on alignright and alignleft classes in Rosetta posts

[audrasjb]

Hello,

Floating images on Rosetta site blog posts are causing issues in smartphone view.

I think we should remove the floats on the following media query:
@media screen and (max-width: 480px)

Example of bad behaviour on smartphones: ​https://fr.wordpress.org/2017/11/03/traduction-du-terme-upload-pour-wordpress-en-francais/

[audrasjb]

Floating image on desktop

[audrasjb]

Floating image on mobile

[audrasjb]

Fix for floating images on mobile

[audrasjb]

I'm not sure this is the good CSS file to edit…

Here is the patch I worked on:

@media screen and (max-width:480px) {
  	.wrapper img.alignright {
  		float: none;
		margin: 5px 0 10px 0;
  	}
  	.wrapper img.alignleft {
  		float: none;
		margin: 5px 0 10px 0;
  	}
}

[obenland]

In 6244:

Main: Center aligned elements on small screens

Avoids awkward text flow alongside floated elements on small screens.

Props audrasjb for initial patch.
Fixes #3248.