diff --git a/aio/content/examples/http/e2e/src/app.e2e-spec.ts b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
index 6a5e78e24d..f69efa6b73 100644
--- a/aio/content/examples/http/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
@@ -29,6 +29,26 @@ const checkLogForMessage = async (message: string) => {
 };
 
 describe('Http Tests', () => {
+  // It seems that currently Chrome/ChromeDriver fail to click a button that is just outside the
+  // viewport (or maybe only partially inside the viewport) - at least in headless mode.
+  // Possible solutions:
+  // 1. Click the element via JavaScript (with something like
+  //    `browser.executeScript('arguments[0].click', elem)`).
+  // 2. Manually scroll the element into view before clicking:
+  //    https://stackoverflow.com/questions/47776774/element-is-not-clickable-at-point-in-headless-mode-but-when-we-remove-headless
+  // 3. Explicitly set the window size to a bigger size:
+  //    https://stackoverflow.com/questions/62003082/elementnotinteractableexception-element-not-interactable-element-has-zero-size
+  //
+  // Since the default 800x600 window size in headless mode (as used on CI) causes the
+  // `<app-config>` buttons to be in a position that trigger the above issue, we explicitly set the
+  // window size to 1920x1080 when in headless mode.
+  beforeAll(async () => {
+    const config = await browser.getProcessedConfig();
+    if (config.capabilities?.chromeOptions?.args?.includes('--headless')) {
+      browser.driver.manage().window().setSize(1920, 1080);
+    }
+  });
+
   beforeEach(() => browser.get(''));
 
   describe('Heroes', () => {
diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
index 1856368208..0f579dda7d 100644
--- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@@ -193,7 +193,7 @@ describe('Tutorial part 6', () => {
 
       for (const button of buttons) {
         // Inherited styles from styles.css
-        expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif');
+        expect(await button.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
         expect(await button.getCssValue('border')).toContain('none');
         expect(await button.getCssValue('padding')).toBe('1px 10px 3px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
@@ -204,7 +204,7 @@ describe('Tutorial part 6', () => {
 
       const addButton = element(by.buttonText('Add hero'));
       // Inherited styles from styles.css
-      expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
       expect(await addButton.getCssValue('border')).toContain('none');
       expect(await addButton.getCssValue('padding')).toBe('8px 24px');
       expect(await addButton.getCssValue('border-radius')).toBe('4px');
diff --git a/aio/tools/examples/shared/boilerplate/common/src/styles.css b/aio/tools/examples/shared/boilerplate/common/src/styles.css
index 442e46c1e8..1e9f1c865d 100644
--- a/aio/tools/examples/shared/boilerplate/common/src/styles.css
+++ b/aio/tools/examples/shared/boilerplate/common/src/styles.css
@@ -1,18 +1,26 @@
 /* Global Styles */
-h1 {
-  color: #369;
+* {
   font-family: Arial, Helvetica, sans-serif;
+}
+h1 {
+  color: #264D73;
   font-size: 250%;
 }
 h2, h3 {
   color: #444;
-  font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
 body {
-  margin: 2em;
+  padding: .5em;
+  max-width: 1000px;
+  margin: auto;
 }
-body, input[text], button {
+@media (min-width: 600px) {
+  body {
+    padding: 2em;
+  }
+}
+body, input[text] {
   color: #333;
   font-family: Cambria, Georgia, serif;
 }
@@ -20,12 +28,12 @@ a {
   cursor: pointer;
 }
 button {
-  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
+  color: black;
 }
 button:hover {
   background-color: #cfd8dc;
@@ -43,21 +51,16 @@ nav a {
   margin-right: 10px;
   margin-top: 10px;
   display: inline-block;
-  background-color: #eee;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
   border-radius: 4px;
 }
-nav a:visited, a:link {
-  color: #607D8B;
-}
+
 nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
+  color: white;
+  background-color:  #42545C;
 }
 nav a.active {
-  color: #039be5;
-}
-
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: black;
+  color: white;
 }