fix(API-1977): Make Welcome block responsive

LevFlavien · LevFlavien · commit 9771dff724da · 2022-12-16T14:37:56.000+01:00
diff --git a/components/block-welcome.css b/components/block-welcome.css
@@ -12,15 +12,15 @@
 }
 
 .block-welcome img {
-    position: absolute;
-    width: 110px;
-    right: 73px;
-    top: 24px;
+    margin-top: -31px;
+    margin-right: 27px;
+    margin-bottom: -11px;
 }
 
 .block-welcome-row {
     display: flex;
     align-items: center;
+    gap: 73px;
 }
 
 .block-welcome-title {
@@ -45,7 +45,3 @@
 
     color: #677688;
 }
-
-.block-welcome-row .block-welcome-text {
-    width: 68.5%;
-}
diff --git a/components/block-welcome.html b/components/block-welcome.html
@@ -5,7 +5,7 @@
             This pre-requisite section will follow you all along the tutorials
             marked with the use case <b>"App workflow"</b>.
         </div>
-        <img src="../content/img/illustrations/illus--Attributegroup.svg" width="140px">
+        <img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
     </div>
     <div class="block-welcome-text">
         The workflow starts with this tutorial that will guide you through the creation of a draft App.
diff --git a/content/tutorials/guides/how-to-get-your-app-token.md b/content/tutorials/guides/how-to-get-your-app-token.md
@@ -28,7 +28,7 @@ Implement the required parts of the App activation process and receive an App ac
             This pre-requisite section will follow you all along the tutorials
             marked with the use case <b>"App workflow"</b>.
         </div>
-        <img src="../../img/illustrations/illus--Attributegroup.svg" width="140px">
+        <img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
     </div>
     <div class="block-welcome-text">
         The workflow starts with this tutorial that will guide you through the creation of a draft App.
diff --git a/styles/guided-tutorial.less b/styles/guided-tutorial.less
@@ -505,15 +505,15 @@
     }
 
     .block-welcome img {
-        position: absolute;
-        width: 110px;
-        right: 73px;
-        top: 24px;
+        margin-top: -31px;
+        margin-right: 27px;
+        margin-bottom: -11px;
     }
 
     .block-welcome-row {
         display: flex;
         align-items: center;
+        gap: 73px;
     }
 
     .block-welcome-title {
@@ -538,7 +538,3 @@
 
         color: #677688;
     }
-
-    .block-welcome-row .block-welcome-text {
-        width: 68.5%;
-    }

Original file line number	Diff line number	Diff line change
`@@ -12,15 +12,15 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.block-welcome img {`
`15`		`- position: absolute;`
`16`		`- width: 110px;`
`17`		`- right: 73px;`
`18`		`- top: 24px;`
	`15`	`+ margin-top: -31px;`
	`16`	`+ margin-right: 27px;`
	`17`	`+ margin-bottom: -11px;`
`19`	`18`	`}`
`20`	`19`
`21`	`20`	`.block-welcome-row {`
`22`	`21`	`display: flex;`
`23`	`22`	`align-items: center;`
	`23`	`+ gap: 73px;`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.block-welcome-title {`
`@@ -45,7 +45,3 @@`
`45`	`45`
`46`	`46`	`color: #677688;`
`47`	`47`	`}`
`48`		`-`
`49`		`-.block-welcome-row .block-welcome-text {`
`50`		`- width: 68.5%;`
`51`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -505,15 +505,15 @@`
`505`	`505`	`}`
`506`	`506`
`507`	`507`	`.block-welcome img {`
`508`		`- position: absolute;`
`509`		`- width: 110px;`
`510`		`- right: 73px;`
`511`		`- top: 24px;`
	`508`	`+ margin-top: -31px;`
	`509`	`+ margin-right: 27px;`
	`510`	`+ margin-bottom: -11px;`
`512`	`511`	`}`
`513`	`512`
`514`	`513`	`.block-welcome-row {`
`515`	`514`	`display: flex;`
`516`	`515`	`align-items: center;`
	`516`	`+ gap: 73px;`
`517`	`517`	`}`
`518`	`518`
`519`	`519`	`.block-welcome-title {`
`@@ -538,7 +538,3 @@`
`538`	`538`
`539`	`539`	`color: #677688;`
`540`	`540`	`}`
`541`		`-`
`542`		`- .block-welcome-row .block-welcome-text {`
`543`		`- width: 68.5%;`
`544`		`- }`