Merge pull request #720 from akeneo/API-1978-correct-next-step-bloc-ui-for-mobile-device

API-1978: Make regular Next Step block layout responsive

Author: LevFlavien

components/components.css

@@ -118,6 +118,11 @@ button {
     line-height: 41px;
     margin-bottom: 20px;
 }
+@media (max-width: 767px) {
+    .block-next-steps-title {
+        text-align: center;
+    }
+}
 .block-next-steps.block-next-steps-main .block-next-steps-text {
     margin-bottom: 30px;
     font-weight: 400;

components/components.html

@@ -74,7 +74,7 @@
 <hr>
 
 <div class="block-next-steps block-next-steps-alt">
-    <img src="../content/img/illustrations/illus--Attribute.svg" width="140px">
+    <img src="../content/img/illustrations/illus--Attribute.svg" width="140px" class="hidden-xs">
     <div class="block-next-steps-column">
         <div class="block-next-steps-title">Next Step</div>
         <div class="block-next-steps-text">Now that you collected your categories, we advise you to follow</div>

content/tutorials/guides/how-to-get-families-and-attributes.md

@@ -224,7 +224,7 @@ attribute_code_list may be significant, very big! If you get an <a href="https:/
 :::
 
 <div class="block-next-steps block-next-steps-alt">
-    <img src="/img/illustrations/illus--Attribute.svg" width="140px">
+    <img src="/img/illustrations/illus--Attribute.svg" width="140px" class="hidden-xs">
     <div class="block-next-steps-column">
         <div class="block-next-steps-title">Next Step</div>
         <div class="block-next-steps-text">Well done! Keep digging into the “App workflow” and follow the next tutorial!</div>

content/tutorials/guides/how-to-get-pim-product-information.md

@@ -541,7 +541,7 @@ Keep in mind that synchronizing media files might be time and resource-consuming
 :::
 
 <div class="block-next-steps block-next-steps-alt">
-    <img src="/img/illustrations/illus--Attribute.svg" width="140px">
+    <img src="/img/illustrations/illus--Attribute.svg" width="140px" class="hidden-xs">
     <div class="block-next-steps-column">
         <div class="block-next-steps-title">Next Step</div>
         <div class="block-next-steps-text">Well done! Keep digging into the “App workflow” and follow the next tutorial!</div>

content/tutorials/guides/how-to-retrieve-pim-structure.md

@@ -201,7 +201,7 @@ storeCategoryTree(channel.category_tree);
 ```
 
 <div class="block-next-steps block-next-steps-alt">
-    <img src="/img/illustrations/illus--Attribute.svg" width="140px">
+    <img src="/img/illustrations/illus--Attribute.svg" width="140px" class="hidden-xs">
     <div class="block-next-steps-column">
         <div class="block-next-steps-title">Next Step</div>
         <div class="block-next-steps-text">Well done! Keep digging into the “App workflow” and follow the next tutorial!</div>

styles/guided-tutorial.less

@@ -89,6 +89,10 @@
         font-size: 34px;
         line-height: 41px;
         margin-bottom: 20px;
+
+        @media (max-width: @screen-xs-max) {
+            text-align: center;
+        }
     }
     .block-next-steps.block-next-steps-main .block-next-steps-text {
         margin-bottom: 30px;