Redesign Android Apps section with modern responsive card layout#906
Open
aayushi2882 wants to merge 2 commits intofossasia:gh-pagesfrom
Open
Redesign Android Apps section with modern responsive card layout#906aayushi2882 wants to merge 2 commits intofossasia:gh-pagesfrom
aayushi2882 wants to merge 2 commits intofossasia:gh-pagesfrom
Conversation
Reviewer's GuideRedesigned the Android Apps section into a modern, responsive Bootstrap-based card grid with new CSS styling, replacing the old image grid while preserving app links and metadata. Flow diagram for the new Android Apps responsive card layout structureflowchart TD
A[section_android_sponsors] --> B[div_container]
B --> C[row_header]
C --> D[col_full_width_heading]
D --> E[h1_Android_Apps_of_FOSSASIA]
B --> F[row_android_apps_grid]
subgraph Card_columns
direction LR
F --> G1[col_md_4_col_sm_6_col_xs_12_SUSI]
F --> G2[col_md_4_col_sm_6_col_xs_12_PSLab]
F --> G3[col_md_4_col_sm_6_col_xs_12_Phimpme]
F --> G4[col_md_4_col_sm_6_col_xs_12_Badge_Magic]
F --> G5[col_md_4_col_sm_6_col_xs_12_Eventyay_Attendee]
F --> G6[col_md_4_col_sm_6_col_xs_12_Eventyay_Organizer]
end
G1 --> H1[div_app_card]
G2 --> H2[div_app_card]
G3 --> H3[div_app_card]
G4 --> H4[div_app_card]
G5 --> H5[div_app_card]
G6 --> H6[div_app_card]
subgraph Card_structure_template
direction TB
HT[div_app_card]
HT --> I[div_app_card_header]
I --> J[img_app_icon]
I --> K[h4_app_title]
HT --> L[img_app_screenshot]
HT --> M[p_app_desc]
HT --> N[div_app_buttons]
N --> O[link_Google_Play_store_badge]
N --> P[link_F_Droid_store_badge_optional]
N --> Q[link_GitHub_badge]
end
B --> R[col_full_width_footer]
R --> S[Text_Find_more_apps_on_Play_Store_link]
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Consider moving the new
#androidand.app-cardCSS rules from the inline<style>block into the existing stylesheet to keep presentation concerns centralized and avoid bloating the HTML template. - The old Android section is fully commented out rather than removed; if it’s no longer needed, deleting it instead of keeping large commented blocks will make the file easier to maintain.
- Several cards reuse the same image for both the icon and the screenshot (e.g.,
SUSI.AI-Android.jpgand others); if separate assets are available, using distinct icon and screenshot images will better match the intended card structure.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider moving the new `#android` and `.app-card` CSS rules from the inline `<style>` block into the existing stylesheet to keep presentation concerns centralized and avoid bloating the HTML template.
- The old Android section is fully commented out rather than removed; if it’s no longer needed, deleting it instead of keeping large commented blocks will make the file easier to maintain.
- Several cards reuse the same image for both the icon and the screenshot (e.g., `SUSI.AI-Android.jpg` and others); if separate assets are available, using distinct icon and screenshot images will better match the intended card structure.
## Individual Comments
### Comment 1
<location> `index1.html:43-52` </location>
<code_context>
+ <style>
</code_context>
<issue_to_address>
**issue (bug_risk):** The new <style> block is placed outside the <head>, which is invalid HTML and may cause inconsistent styling behavior.
This `<style>` tag appears after `</head>` and before `<body>`, which violates HTML structure and can cause inconsistent behavior across browsers and tools. Please move the entire style block into the `<head>` (or an external CSS file) to keep the document valid.
</issue_to_address>
### Comment 2
<location> `index1.html:106-107` </location>
<code_context>
+ .app-screenshot { max-height: 360px; }
+}
+
+/* safety: prevent accidental horizontal overflow */
+#android, .android-apps-grid { overflow-x: hidden; }
+
+ </style>
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Using overflow-x: hidden on the section may hide real layout issues or clipped content on smaller screens.
Applying `overflow-x: hidden` to `#android` and `.android-apps-grid` hides horizontal overflow instead of addressing its cause, and may clip badges or screenshots on smaller viewports. Consider removing this and correcting layout with padding/margin or image-size adjustments so content fits naturally within the viewport.
Suggested implementation:
```
/* responsiveness: 3 cols desktop, 2 cols tablet, 1 col mobile (Bootstrap handles columns) */
@media (max-width: 991px) {
.app-card { max-width: 320px; }
.app-screenshot { max-height:380px; }
}
@media (max-width: 575px) {
.app-card { max-width: 100%; padding:12px; }
.app-screenshot { max-height: 360px; }
}
/* ensure screenshots scale within their card to avoid horizontal overflow */
.app-screenshot {
max-width: 100%;
height: auto;
display: block;
}
/* ensure grid content respects container width without hiding overflow */
.android-apps-grid {
box-sizing: border-box;
width: 100%;
}
</style>
```
Depending on the rest of the layout, you may also want to:
1. Verify that any badge or logo images inside `.android-apps-grid` also have `max-width: 100%; height: auto;` to prevent them from exceeding their container width.
2. Check for fixed-width margins or negative margins on `.app-card`, `.android-apps-grid`, or their parents that might still cause overflow and adjust them (e.g., use percentage-based widths or reduce horizontal padding on smaller breakpoints).
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Author
|
All requested improvements have been completed: ✔ Moved new CSS rules from inline <style> to the main stylesheet 
Please let me know if any other correction has to be made |
Author
|
Just a gentle follow-up — happy to make any further changes if needed. |
Author
|
Just a gentle follow-up — happy to make any further changes if needed. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR redesigns the Android Apps section of the FOSSASIA website by replacing the old image-grid layout with a modern, responsive card-based UI.
The new layout improves readability, UX consistency, and responsiveness across all screen sizes.
Key Improvements
✔️ Fully responsive Bootstrap-aligned 3-column card layout
✔️ Each card now includes:
✔️ Proper scaling on browser zoom (no more fixed-height images)
✔️ Improved spacing, margins, and alignment
✔️ Cleaner, modern UI matching other sections of fossasia.org
✔️ Added subtle shadows + hover effect for better visual clarity
Why this change?
The previous section:
This redesign makes the section more professional, readable, and maintainable.
Before:
After:
Related Issue
Fixes: #905
Request
Please review and let me know if:
Thank you!
Summary by Sourcery
Redesign the Android Apps section of the homepage to use a modern, responsive card-based layout with improved content structure and visuals.
New Features:
Enhancements: