Help Admin page - topics overlapping in Narrow screens

Hi,

I have added css to take care of the display on smaller viewport with media queries.
The CSS displays the block as 100% wide and clears the float.

So there is no float left anymore on smaller screens. Instead the blocks drop below with a margin top of 20px to separate them.

Please check the patch.

Regards
Jay

Please can you review the patch

Hi, I have tested the patch and everything looks okay as the attached image shows.

I think it should be considered as RTBC ;)

Oh that is much more nicerer. :)

Just a tiny nit, but we need spaces between the : and the thing after it, per the CSS coding standards. Looks like the indentation might be off too.

Feel free to mark back to RTBC once those minor things are fixed.

Please find attached the revised patch with the css and identation fix

More nit picking :-)

Comment formatting:

/**
 * Documentation here.
 */

The comment itself:

"Display on a narrow viewport to avoid text overlapping."

I read "Display" as a verb. It's more clear as something like:

"Avoid text overlapping on a narrow viewport."

Hi Echoz,

Thanks for correcting. Agree the documentation line you suggested looks better.
Please find attached the revised.

The comment formatting was correct in the first patch, the second patch you lost the left space on the second and third lines. This wasn't corrected in the third patch. See code example in #6.

Needs indentation on the second comment as echoz suggested.

Sorry, I have fixed that now

Okay, I think it's right now :)

I also think that you should not mark the issue as RTBC, someone else must do it ;)

Thanks for the help :)

Maybe now? :)

Sorry to not have brought this up in the beginning, but why are we putting a space between these groups (margin-top: 20px;)? It can just appear as one list, there is no benefit to separating in groups. We would not want more space at the very top anyway. I would have it margin: 0; and that will also take care of the right 3% margin (or left in the rtl file) in case this would actually case a horizontal scrollbar in some rare mobile browser.

Hi Echoz,
I have set it to margin:0; as per your suggestion and it looks fine as well

Ok, the #16 patch seems to solve the issue.

Great work!

@jayboodhun, ok!

Thanks guys

Committed and pushed to 8.x. Thanks!