From 421dba0184f80af017857cae00c960fd90620200 Mon Sep 17 00:00:00 2001
From: ajitsinghkaler <ajitsinghkaler0@gmail.com>
Date: Thu, 5 Dec 2019 21:33:19 +0530
Subject: [PATCH] fix(docs-infra): make header full-width and panels full-width
 on mobile screens (#34188)

On events page the header was not able to take full width when body exceeds viewport width of the screen So made the below body go overflow-x auto and resources page was taking 80% of the width which is okay on desktop but on mobile it should take 100% width put a media quer for it.

Fixes #34163

PR Close #34188
---
 aio/content/marketing/events.html               | 2 +-
 aio/src/styles/1-layouts/_marketing-layout.scss | 4 ++++
 aio/src/styles/2-modules/_resources.scss        | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/aio/content/marketing/events.html b/aio/content/marketing/events.html
index 29cbc0852d..d886dcde60 100755
--- a/aio/content/marketing/events.html
+++ b/aio/content/marketing/events.html
@@ -2,7 +2,7 @@
   <h1 class="banner-headline no-toc no-anchor">Events</h1>
 </header>
 
-<article>
+<article class="events-container">
   <p>Where we'll be presenting:</p>
   <table class="is-full-width">
     <thead>
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 8b99c00f1f..4413fa19c5 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -439,3 +439,7 @@ div[layout=row]{
 .page-features .marketing-banner {
   margin-bottom: 20px;
 }
+
+.events-container{
+  overflow-x: auto;
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss
index e1ca288c8b..386eac2829 100644
--- a/aio/src/styles/2-modules/_resources.scss
+++ b/aio/src/styles/2-modules/_resources.scss
@@ -1,5 +1,8 @@
 .showcase {
   width: 80%;
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
 
 .c-resource-nav {