[Bug] Mobile responsiveness for blog pages

[Netacci]

Description

When viewing blog post pages on smaller screens (mobile devices), the content appears to shrink, making it difficult to read and interact with. This issue affects the overall mobile user experience, as the page layout is not adapting responsively to the screen size

Reproduction

1. Go to `blog-post.html` or `blog-index.html` on a mobile device or simulate a smaller screen size using browser developer tools.
2. Scroll through the content and observe how the text and images scale.
3. Notice that some content doesn't take up the full width, leaving many whitespaces.
4. See error: content is not mobile-friendly, and elements are improperly scaled.

Expectation

The blog post pages should be fully responsive across all screen sizes:

• Content should resize and reflow appropriately for mobile devices.
• Text should remain legible, and images should scale while maintaining their aspect ratio.
• The layout should adapt to smaller screens without shrinking or distorting content.

Screenshots

Blog post page /specimen/contexts/blog-post.html

• Width 768px
  

• maxWidth - 425px
  https://github.com/user-attachments/assets/56b38ef0-f3fe-493b-8c32-fd93d03d05b1

Blog Index page /specimen/contexts/blog-index.html
This issue only occurs on the first item on the featured posts list. The text doesn't fill up the container space causing a lot of whitespace.

• maxWidth 680px :
  

• maxWidth - 425px
  https://github.com/user-attachments/assets/8b5b5da9-c944-410b-9ec0-9eaec502e35a

Environment

• Device: Laptop
• OS: Windows 11
• Browser: Chrome
• Version: (eg. 13; 73)
• Other info: Display resolution – max width 680px (issue specifically observed at this breakpoint or lower)

Additional context

We can reduce the padding for article on the blog index page. Currently, it is 4em for all screen sizes. Also, we can reduce fontsizes where necessary so that it's more suitable for mobile.

Implementation

• I would be interested in implementing this feature.

[possumbilities]

@Netacci Thanks for this contribution! Which context are you viewing this in? What specific px cut-off is this occurring at? Can you please fill out and provide the device/browser/os details that were in the Issue template originally?

[Netacci]

Hi @possumbilities I have updated the issue with additional information, screenshots, and screen recordings. This issue spans across some other pages but I picked the blog post pages as a starting point.

[Netacci]

hi @possumbilities, I updated this issue last week, but it hasn't been looked at yet. Just a soft reminder

[OmarAmeen01]

Linking this issue to the this issue #276 for a application of general fix to this problem