Skip to content

Commit 1379114

Browse files
LevFlavienLevFlavien
committed
fix(API-1977): Make requirement blocks responsive
1 parent c36596c commit 1379114

File tree

7 files changed

+23
-39
lines changed

7 files changed

+23
-39
lines changed

‎components/components.css

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,15 @@ button {
6868
font-weight: 500;
6969
margin-bottom: 13px;
7070
}
71-
.block-requirements ul {
72-
margin: 0;
73-
list-style-type: none;
74-
padding-left: 60px;
75-
}
7671
.block-requirements-row {
7772
display: flex;
7873
justify-content: space-between;
74+
gap: 60px;
7975
}
8076
.block-requirements-steps {
8177
display: flex;
82-
align-items: center;
78+
flex-direction: column;
79+
justify-content: center;
8380
font-weight: 500;
8481
}
8582
.block-requirements-steps a {

‎components/components.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,10 @@
6363
If you're starting building your App, make sure you previously followed:
6464
</div>
6565
<div class="block-requirements-row">
66-
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px">
66+
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
6767
<div class="block-requirements-steps">
68-
<ul>
69-
<li>Step 1. <a href="urllink">Get your App token tutorial</a></li>
70-
<li>Step 2. <a href="urllink">Retrieve PIM structure tutorial</a></li>
71-
</ul>
68+
<div>Step 1. <a href="urllink">Get your App token tutorial</a></div>
69+
<div>Step 2. <a href="urllink">Retrieve PIM structure tutorial</a></div>
7270
</div>
7371
</div>
7472
</div>

‎content/tutorials/guides/how-to-collect-product-variations.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,12 @@
4444
If you're following our App workflow, make sure you previously read:
4545
</div>
4646
<div class="block-requirements-row">
47-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
47+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4848
<div class="block-requirements-steps">
49-
<ul>
50-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
51-
<li>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></li>
52-
<li>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families, family variants, and attributes</a></li>
53-
<li>Step 4. <a href="how-to-get-pim-product-information.html" target="_blank" rel="noopener noreferrer">How to get PIM product information</a></li>
54-
</ul>
49+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
50+
<div>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></div>
51+
<div>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families, family variants, and attributes</a></div>
52+
<div>Step 4. <a href="how-to-get-pim-product-information.html" target="_blank" rel="noopener noreferrer">How to get PIM product information</a></div>
5553
</div>
5654
</div>
5755
</div>

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,10 @@
4444
If you're starting to build your App, make sure you previously followed:
4545
</div>
4646
<div class="block-requirements-row">
47-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
47+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4848
<div class="block-requirements-steps">
49-
<ul>
50-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
51-
<li>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></li>
52-
</ul>
49+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
50+
<div>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></div>
5351
</div>
5452
</div>
5553
</div>

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,11 @@
3838
If you're starting to build your App, make sure you previously followed:
3939
</div>
4040
<div class="block-requirements-row">
41-
<img src="/img/illustrations/illus--Attributegroup.svg" width="110px">
41+
<img src="/img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4242
<div class="block-requirements-steps">
43-
<ul>
44-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
45-
<li>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></li>
46-
<li>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families and attributes</a></li>
47-
</ul>
43+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
44+
<div>Step 2. <a href="how-to-retrieve-pim-structure.html" target="_blank" rel="noopener noreferrer">How to retrieve PIM structure</a></div>
45+
<div>Step 3. <a href="how-to-get-families-and-attributes.html" target="_blank" rel="noopener noreferrer">How to get families and attributes</a></div>
4846
</div>
4947
</div>
5048
</div>

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,9 @@ Retrieve the PIM structure through a channel resource. This is usually the requi
4040
If you're starting building your App, make sure you previously followed:
4141
</div>
4242
<div class="block-requirements-row">
43-
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
43+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px" class="hidden-xs">
4444
<div class="block-requirements-steps">
45-
<ul>
46-
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
47-
</ul>
45+
<div>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></div>
4846
</div>
4947
</div>
5048
</div>

‎styles/guided-tutorial.less

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,15 @@
4040
font-weight: 500;
4141
margin-bottom: 13px;
4242
}
43-
.block-requirements ul {
44-
margin: 0;
45-
list-style-type: none;
46-
padding-left: 60px;
47-
}
4843
.block-requirements-row {
4944
display: flex;
5045
justify-content: space-between;
46+
gap: 60px;
5147
}
5248
.block-requirements-steps {
5349
display: flex;
54-
align-items: center;
50+
flex-direction: column;
51+
justify-content: center;
5552
font-weight: 500;
5653
}
5754
.block-requirements-steps a {

0 commit comments

Comments
 (0)