[Bug] Improper Alignment of Blue Boxes in Mobile View in program-index.html

[Raja-Abrar-Khan]

Description

In the mobile view, the blue content boxes ("Copyright" and "Better Internet") are not properly aligned and appear too large, disrupting the layout. This impacts readability and usability on smaller screens. This can be done by adjusting CSS .

Reproduction

1. Open the webpage in a mobile view (e.g., using developer tools or a mobile device).
2. Navigate to the section with the blue content boxes.
3. Observe the misalignment and large size of the boxes.
4. See error.

Expectation

The blue boxes should be properly aligned and scaled down to fit mobile screens, maintaining readability and a clean layout.

Screenshots

Environment

• Device: (eg. iPhone Xs; laptop)
• OS: (eg. iOS 13.5; Fedora 32)
• Browser: (eg. Safari; Firefox)
• Version: (eg. 13; 73)
• Other info: (eg. display resolution, ease-of-access settings)

Additional context

There may be other layout issues on mobile, but addressing this particular issue at a time is will be better to avoid confusion.

Resolution

• I would be interested in resolving this bug.

[Raja-Abrar-Khan]

@possumbilities can you look into this issue this can b solved using some basic css .

[possumbilities]

@Raja-Abrar-Khan is the issue that they are not taking up equal vertical height?

[Raja-Abrar-Khan]

@possumbilities yes they are not taking the vertical height equally, as you can see in the height is looking all better in the normal screen but when it comes to the mobile screen it is not working as it was working in the main screen(desktop view) .

[kris70lesgo]

Hi @possumbilities @Raja-Abrar-Khan , I’ve reviewed the issue with the blue boxes in the mobile view. It seems that a PR (#236) was linked to resolve this. I will check if it has been merged and whether the issue is fully addressed. If not, I’d be happy to make the necessary CSS adjustments to ensure proper alignment and scaling on mobile views.