[Bug] Padding missing on the most of the pages on smaller devices

[OmarAmeen01]

Description

Most of the pages in the design system don't have padding on content on smaller devices viz the title or the description of the page and other elements
which makes content stick to the wall and jumbles the overall view of the page

Reproduction

1. Go live on any page eg default-page, person-page, home-index.
2. switch to responsive mode.
3. see the content sticking to the wall.

Expectation

the content should have padding on the left and right which improves its readability

Screenshots

default-page

home-index

person-page

Environment

• Device: (iPhone Xs; laptop:Andriod )
• OS: ( iOS 13.5; Fedora 32: Windows )
• Browser: ( Safari; Firefox: Chrome)

Resolution

• I would be interested in resolving this bug.

[possumbilities]

This is a duplicate of several other Issues. However, I think this is the only one thus far that approaches this from a more overall approach, rather than one or two specific contexts. I'm leaving it here for now.

@OmarAmeen01 Would you please link all the padding related Issues in a comment here?

[OmarAmeen01]

yes @possumbilities I would be glad to add all padding related issues here

[OmarAmeen01]

@possumbilities can I change this Issue description that covers wide range of issues related to the responsiveness of this design system I would have covered them in this issue but I thought this would lead to big PR.

[OmarAmeen01]

@possumbilities Linked all the issues related to the padding here that I could find If anyone has issue related to padding that is not listed here please link it here

[Immy-delish]

Thank you @OmarAmeen01 for linking all the related issues. Maybe the name of the issue can then be changed and we see how we can resolve this.

[lauracastrotech]

@OmarAmeen01 I am looking at all the issues related to this with @Immy-delish and when we go to the blog and put the responsive mode on, there is no issue with padding and the page responds well when we shrink the sized. Does this mean that the issue is resolved and maybe @possumbilities hasn't been able to make the change? we don't want to duplicate work

[OmarAmeen01]

@lauracastrotech there is a padding related issue there . only thing is that it doesn't have less padding it has more padding which squeezes the content everything around it

[kris70lesgo]

Hi @possumbilities , I believe I can tackle this issue. I have experience working on mobile responsiveness and CSS padding issues. I’d be happy to address the padding issues across all affected pages and ensure mobile-friendly padding for better readability. Could you please assign this issue to me

[possumbilities]

@kris70lesgo Hi! We don't assign Issues until PRs are merged

Please see the Contribution Guidelines

Additionally, this ticket needs more thorough documentation since I believe this affects more than the listed contexts above; before it can move away from 🧹 status: ticket work required Needs more details before it can be worked on It would be helpful if you want to try to tackle that first here within a comment.

[possumbilities]

Adding some further context here: The main content area across a variety of contexts lacks adequate padding. A change here should be discrete an try to correct as many contexts as possible in the cascade rather than try overly specific fixes.

likely covered in part by other Issues, we'll track work here to try to keep it applicable across contexts:

• [Feature] archive-page.html looks abrupt in screens of smaller resolution  #188
• [Bug] Mobile responsibility UI issue on default-page.html #68
• [Bug] Mobile responsiveness for blog pages #60
• [Bug] Content Overflow on the attribution-panel in the Footer Card on Maximized Screen - home-index.html #262
• [Bug] Mobile Responsiveness Issue on search-index.html Page #142

[possumbilities]

I'm assigning this to myself, but if anyone wants to take a shot at correcting this, feel free to submit a PR.