diff --git a/includes/article.html b/includes/article.html
index 9b73446cec..1d8d315b3f 100644
--- a/includes/article.html
+++ b/includes/article.html
@@ -2,7 +2,7 @@
   <article class="markdown-body width-full">
     <div class="d-lg-flex flex-justify-between">
       <div class="d-block d-lg-none">{% include article-version-switcher %}</div>
-      <div class="d-flex flex-items-center" style="height: 39px;">
+      <div class="d-flex flex-items-center breadcrumbs-wrapper">
         {% include breadcrumbs %}
       </div>
       <div class="d-none d-lg-block">{% include article-version-switcher %}</div>
diff --git a/layouts/graphql-explorer.html b/layouts/graphql-explorer.html
index 23fe4cc7eb..7f61637049 100644
--- a/layouts/graphql-explorer.html
+++ b/layouts/graphql-explorer.html
@@ -11,13 +11,13 @@
       <main class="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
         <article class="markdown-body width-full">
           <div class="d-lg-flex flex-justify-between">
-            <div class="d-flex flex-items-center" style="height: 39px;">
+            <div class="d-flex flex-items-center breadcrumbs-wrapper">
               {% include breadcrumbs %}
             </div>
           </div>
 
           <h1 class="border-bottom-0">{{ page.title }}</h1>
-      
+
           <div class="mt-2">
             <div>
               <iframe id="graphiql" class="graphql-explorer" scrolling="no" src="{{ graphql.explorerUrl }}">
diff --git a/stylesheets/article.scss b/stylesheets/article.scss
index e7de0d0ca6..b31521303a 100644
--- a/stylesheets/article.scss
+++ b/stylesheets/article.scss
@@ -87,6 +87,12 @@
 /* Breadcrumbs
 ------------------------------------------------------------------------------*/
 
+.breadcrumbs-wrapper {
+  @include breakpoint(xl) {
+    height: 39px;
+  }
+}
+
 .breadcrumbs a:not(:last-child)::after, .breadcrumbs span:not(:last-child)::after {
   content: '/';
   color: $gray-400;