fix: content centering and z-index position on adaptation (#1094)

openedx · Nov 27, 2023 · 479dac8 · 479dac8
1 parent c097b5b
commit 479dac8
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/src/base-container/components/default-layout/MediumLayout.jsx b/src/base-container/components/default-layout/MediumLayout.jsx
@@ -23,7 +23,7 @@ const MediumLayout = () => {
             <div>
               <h1
                 className={classNames(
-                  'display-1 text-white mt-5 mb-5 mr-2',
+                  'display-1 text-white mt-5 mb-5 mr-2 main-heading',
                   { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
                 )}
               >

diff --git a/src/base-container/components/default-layout/SmallLayout.jsx b/src/base-container/components/default-layout/SmallLayout.jsx
@@ -17,12 +17,11 @@ const SmallLayout = () => {
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
-        <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+        <div className="d-flex align-items-center m-3.5">
           <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
               'text-white mt-3.5 mb-3.5',
-              { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
             )}
           >
             <span className="mr-1">{formatMessage(messages['start.learning'])}</span>

diff --git a/src/base-container/components/welcome-page-layout/SmallLayout.jsx b/src/base-container/components/welcome-page-layout/SmallLayout.jsx
@@ -16,7 +16,7 @@ const SmallLayout = ({ username }) => {
       <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
         <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
       </Hyperlink>
-      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+      <div className="d-flex align-items-center m-3.5">
         <div className="small-yellow-line mt-4.5" />
         <div>
           <h1 className="h5 data-hj-suppress">

diff --git a/src/sass/_base_component.scss b/src/sass/_base_component.scss
@@ -38,6 +38,11 @@
   max-width: 320px;
 }
 
+.main-heading {
+  position: relative;
+  z-index: 2;
+}
+
 .complete-your-profile {
   font-weight: 700;
   line-height: 1;