Fixed 'Insert Quotes...' button issue in responsive

[Null]

There seems to be a little issue with the 'Insert Quotes...' button on my mobile device, no idea about other mobile devices as I haven't checked yet (iPhone 5S, iOS 7.0.6/Safari).

 

[Lawrence]

There seems to be a little issue with the 'Insert Quotes...' button on my mobile device, no idea about other mobile devices as I haven't checked yet (iPhone 5S, iOS 7.0.6/Safari).
View attachment 67844 View attachment 67845

Just tested on my iPad mini in portrait mode and no issues.

 

[Null]

Just tested on my iPad mini in portrait mode and no issues.

I assume it's purely down to screen resolution and elements fitting within said space.

 

[Liam W]

Looks a bit off on Nexus 5...

 

[Naz]

Confirmed on my iPhone 5.

 

[Sheratan]

Confirmed on IE 11 Windows Phone, both potrait and landscape

 

[Mike]

I assume the only real issue is the vertical alignment, which is from the float. The rest of the wrapping is simply what happens with a left floated element alongside right aligned elements.

 

[Mike]

I've sorted the vertical alignment.

 

[Chris D]

The rest of the wrapping is simply what happens with a left floated element alongside right aligned elements.

There was a point where I thought about reporting this as a bug -- I know it's designed that way and why. But to me it still looks odd on a smaller screen.

I did wonder if having two Insert Quote buttons on screen could be a solution, with them being hidden/shown depending on viewport width.



Better than this:

 

[Chris D]

I've just had another thought about this:

It's debatable whether the Insert Quotes button needs to be floated left anyway. To insert a quote it's on the left. To insert a file it's on the right. To insert the post it's on the right. To add a quote to multi quote it's on the right.

That button specifically being on the left seems inconsistent.

 

[Null]

I've just had another thought about this:

It's debatable whether the Insert Quotes button needs to be floated left anyway. To insert a quote it's on the left. To insert a file it's on the right. To insert the post it's on the right. To add a quote to multi quote it's on the right.

That button specifically being on the left seems inconsistent.

I think the first image in your previous post looks pretty much spot on.

These buttons are the only thing I dislike about XF's mobile-responsive layout, it makes me cringe to see such a small thing ruin how beautiful XF looks/works on mobile.

 

[Chris D]

I think the first image in your previous post looks pretty much spot on.

These buttons are the only thing I dislike about XF's mobile-responsive layout, it makes me cringe to see such a small thing ruin how beautiful XF looks/works on mobile.

It's actually quite simple to do it yourself. You could just have it floated right permanently like this: (Add to EXTRA.css)

button.MultiQuoteWatcher
{
    float: right;
}

or use some media queries to affect that at certain screen sizes.

My idea of having two buttons is probably a bit overkill.