[Bug] HTML print layout looks bad

[TimidRobot]

Description

HTML print layout looks bad

We expect people may print all of the legal tools Deeds and Legal Codes pages. The following list pages provide links to the legal tools:

• CreativeCommons.org/licenses/
• CreativeCommons.org/publicdomain/

Reproduction

1. Ex. legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en

Expectation

• Icons should be consistent size
• Text should flow without overlap
• Digital navigation elements should be hidden

Screenshots

Environment

• Device: Laptop
• OS: macOS Monterey 12.3.1
• Browser: Firefox 99.0.1

[AMMAR-62]

Anyone on this issue yet?? ... may I work on this??

[TimidRobot]

Anyone on this issue yet?? ... may I work on this??

@AMMAR-62 no one else is working on this yet. Please keep the print media CSS in its own file and keep it as simple as possible.

[MdSahil-oss]

@TimidRobot I'm new to creativecommons, I think this issue has been resolved because when I visit to the page https://legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en I don't see any kind of icons/text overlapping using browser chrome/firefox on my laptop (window 11 OS) but I see text/icon on the page doesn't render very well (looks very bad) on the screen size (width) 500px (or smaller)

Screenshots

Do we need to fix this ?

[TimidRobot]

@MdSahil-oss

[...] I think this issue has been resolved because when I visit to the page https://legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en I don't see any kind of icons/text overlapping using browser chrome/firefox on my laptop (window 11 OS) [...]

The issue is only visible from print dialog/output.

[...] I see text/icon on the page doesn't render very well (looks very bad) on the screen size (width) 500px (or smaller)
[...]
Do we need to fix this ?

Sure! Help documenting the responsiveness issue(s) in an issue would also be welcomed.

[shreyansh1910]

@TimidRobot As i see this problem still persist .
i would like to work on it.
I need few information does this issue only persist in this page or some other page also.
Do you want me to create new css for printing or make correction to already present css .
(please guide me I am little new)

[TimidRobot]

@TimidRobot As i see this problem still persist . i would like to work on it. I need few information does this issue only persist in this page or some other page also. Do you want me to create new css for printing or make correction to already present css . (please guide me I am little new)

Please see Contribution Guidelines — Creative Commons Open Source.

I think a new CSS file.

[BalrajDhakad]

Hey,
This is Balraj,
I want to work on this issue could you please assign it to me.
@TimidRobot

[TimidRobot]

Please see Contribution Guidelines — Creative Commons Open Source for how we manage issues and PRs (we generally don't assign issues prior to resolution).

[BalrajDhakad]

I have read it but able to get what you want to say about assigning this issue to me
@TimidRobot

[SamarthShukla17]

Hi @TimidRobot
Is this https://legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en the page you want to be addressed in the issue?

[TimidRobot]

@SamarthShukla17 That page is an example of a Deed. We want to improve printing of all of the tools Deed and Legal Code pages (I also updated the issue description).

[SamarthShukla17]

Thankyou @TimidRobot for the clarification.

[TimidRobot]

@nobodys-ghost please make a comment on this issue so GitHub will allow me to assign it to you

[nobodys-ghost]

I've added a pull request to fix this issue. (see #484 )