WordPress.org

Making WordPress.org

Opened 6 weeks ago

Closed 10 days ago

#3248 closed defect (fixed)

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

Reported by: audrasjb Owned by: obenland
Milestone: Priority: normal
Component: International Sites (Rosetta) Keywords: has-screenshots has-patch
Cc:

Description

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/

Attachments (3)

floating_image_on_desktop.png (236.6 KB) - added by audrasjb 6 weeks ago.
Floating image on desktop
floating_image_on_mobile.png (77.7 KB) - added by audrasjb 6 weeks ago.
Floating image on mobile
3248.diff (517 bytes) - added by audrasjb 6 weeks ago.
Fix for floating images on mobile

Download all attachments as: .zip

Change History (5)

@audrasjb
6 weeks ago

Floating image on desktop

@audrasjb
6 weeks ago

Floating image on mobile

@audrasjb
6 weeks ago

Fix for floating images on mobile

#1 @audrasjb
6 weeks ago

  • Keywords has-patch added

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;
  	}
}

#2 @obenland
10 days ago

  • Owner set to obenland
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.