Skip to content

Fix mobile responsiveness and typography scaling for compare.html #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spivanatalie64 merged 7 commits into from
Feb 17, 2026
+106 −34
Merged

Fix mobile responsiveness and typography scaling for compare.html #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a20760
Initial plan
Copilot Feb 17, 2026
f05a010
Add mobile responsiveness to compare.html with overflow wrappers for …
Copilot Feb 17, 2026
96228a5
Update test comment to accurately reflect number of overflow wrappers
Copilot Feb 17, 2026
b7be864
Improve mobile scaling for headings and content on compare.html
Copilot Feb 17, 2026
1714619
Merge branch 'main' into copilot/update-compare-html-mobile
spivanatalie64 Feb 17, 2026
d6eeb3a
Refactor CSS to remove !important flags and use semantic class
Copilot Feb 17, 2026
31544a7
Move inline styles to CSS class for better maintainability
Copilot Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 82 additions & 3 deletions compare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,23 @@
margin: 1rem 0;
}

.cta-section {
margin-top: 3rem;
padding: 2rem;
background: rgba(46, 204, 113, 0.1);
border-left: 4px solid var(--acreetion-green);
border-radius: 4px;
}

.cta-section h3 {
color: var(--acreetion-green);
margin-bottom: 1rem;
}

.cta-section p {
margin-bottom: 1rem;
}

@media (max-width: 768px) {
.comparison-table {
font-size: 0.85rem;
Expand All @@ -96,6 +113,26 @@
.feature-card {
padding: 1rem;
}

.content-box .box-header h1 {
font-size: 1.5rem;
}

.content-box .box-body h2 {
font-size: 1.3rem;
margin-top: 2rem;
margin-bottom: 1rem;
}

.content-box .box-body h3 {
font-size: 1.1rem;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}

.content-box .box-body > p:first-child {
font-size: 1rem;
}
}

@media (max-width: 480px) {
Expand All @@ -115,6 +152,40 @@
.feature-card p {
font-size: 0.85rem;
}

.content-box .box-header h1 {
font-size: 1.3rem;
}

.content-box .box-body h2 {
font-size: 1.1rem;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}

.content-box .box-body h3 {
font-size: 1rem;
margin-top: 1rem;
margin-bottom: 0.5rem;
}

.content-box .box-body > p:first-child {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}

.cta-section {
margin-top: 2rem;
padding: 1rem;
}

.cta-section h3 {
font-size: 1rem;
}

.cta-section p {
font-size: 0.9rem;
}
}
</style>
<script>
Expand Down Expand Up @@ -227,6 +298,7 @@ <h2 style="color: var(--acreetion-green); margin-top: 2rem; margin-bottom: 1rem;
<h2 style="color: var(--acreetion-green); margin-top: 3rem; margin-bottom: 1rem;">Detailed Comparisons</h2>

<h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Ubuntu</h3>
<div style="overflow-x: auto;">
<table class="comparison-table">
<thead>
<tr>
Expand Down Expand Up @@ -268,8 +340,10 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
</tr>
</tbody>
</table>
</div>

<h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Linux Mint</h3>
<div style="overflow-x: auto;">
<table class="comparison-table">
<thead>
<tr>
Expand Down Expand Up @@ -306,8 +380,10 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
</tr>
</tbody>
</table>
</div>

<h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Manjaro</h3>
<div style="overflow-x: auto;">
<table class="comparison-table">
<thead>
<tr>
Expand Down Expand Up @@ -344,8 +420,10 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
</tr>
</tbody>
</table>
</div>

<h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom: 1rem;">AcreetionOS vs Arch Linux</h3>
<div style="overflow-x: auto;">
<table class="comparison-table">
<thead>
<tr>
Expand Down Expand Up @@ -387,6 +465,7 @@ <h3 style="color: var(--acreetion-text-bright); margin-top: 2rem; margin-bottom:
</tr>
</tbody>
</table>
</div>

<h2 style="color: var(--acreetion-green); margin-top: 3rem; margin-bottom: 1rem;">Why Choose AcreetionOS?</h2>

Expand Down Expand Up @@ -422,9 +501,9 @@ <h3>👥 Community Driven</h3>
</div>
</div>

<div style="margin-top: 3rem; padding: 2rem; background: rgba(46, 204, 113, 0.1); border-left: 4px solid var(--acreetion-green); border-radius: 4px;">
<h3 style="color: var(--acreetion-green); margin-bottom: 1rem;">Ready to Switch?</h3>
<p style="margin-bottom: 1rem;">AcreetionOS combines the power of Arch Linux with the ease of Ubuntu. Try it risk-free with a live USB!</p>
<div class="cta-section">
<h3>Ready to Switch?</h3>
<p>AcreetionOS combines the power of Arch Linux with the ease of Ubuntu. Try it risk-free with a live USB!</p>
<a href="index.html#manual-downloads" class="btn">Download AcreetionOS</a>
<a href="install.html" class="btn" style="background-color: var(--storm-color);">Installation Guide</a>
</div>
Expand Down
55 changes: 24 additions & 31 deletions tests/basic.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,46 +122,39 @@ test.describe('Mobile Responsiveness', () => {
await expect(nameInput).toBeVisible();
});

test('FAQ page renders correctly on mobile (375px)', async ({ page }) => {
// Set mobile viewport (iPhone size)
test('compare page tables are scrollable on mobile', async ({ page }) => {
// Set mobile viewport (iPhone SE size)
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('/faq.html');
await page.goto('/compare.html');

// Verify page loads
await expect(page).toHaveTitle(/FAQ/);
await expect(page).toHaveTitle(/Compare/);

// Verify FAQ sections are visible
const faqSection = page.locator('.faq-section').first();
await expect(faqSection).toBeVisible();
// Verify all comparison tables have overflow wrappers
const overflowWrappers = page.locator('div[style*="overflow-x: auto"]');
const count = await overflowWrappers.count();
expect(count).toBeGreaterThanOrEqual(5); // Should have 5 tables with overflow wrappers (1 quick comparison + 4 detailed)

// Verify FAQ questions are clickable
const faqQuestion = page.locator('.faq-question').first();
await expect(faqQuestion).toBeVisible();
// Verify tables are visible
const tables = page.locator('.comparison-table');
const tableCount = await tables.count();
expect(tableCount).toBeGreaterThan(0);

// Verify table of contents is visible
const faqToc = page.locator('.faq-toc');
await expect(faqToc).toBeVisible();
// Verify first table is visible
await expect(tables.first()).toBeVisible();
});

test('FAQ page renders correctly on very small mobile (320px)', async ({ page }) => {
// Set very small mobile viewport
await page.setViewportSize({ width: 320, height: 568 });
await page.goto('/faq.html');

// Verify page loads
await expect(page).toHaveTitle(/FAQ/);

// Verify critical elements are still visible and accessible
const faqSection = page.locator('.faq-section').first();
await expect(faqSection).toBeVisible();
test('compare page feature cards stack on mobile', async ({ page }) => {
// Set mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('/compare.html');

// Verify code blocks don't cause horizontal scrolling issues
const preBlocks = page.locator('.faq-answer pre');
const count = await preBlocks.count();
expect(count).toBeGreaterThan(0);
// Verify feature cards are visible
const featureCards = page.locator('.feature-card');
const cardCount = await featureCards.count();
expect(cardCount).toBeGreaterThan(0);

// Verify buttons are visible
const buttons = page.locator('.btn');
await expect(buttons.first()).toBeVisible();
// Verify first card is visible
await expect(featureCards.first()).toBeVisible();
});
});