diff --git a/docs/_includes/annotation.html b/docs/_includes/annotation.html
index 030505d965..e2f89f790a 100644
--- a/docs/_includes/annotation.html
+++ b/docs/_includes/annotation.html
@@ -11,9 +11,6 @@
 {% assign positionClasses = "mt8 fd-column" %}
 {% assign height = 12 %}
 
-{% if range != true %}
-  {% assign computedClasses = "mx-auto" %}
-{% endif %}
 {% if position == "top" %}
   {% assign positionClasses = "mb8 fd-column-reverse" %}
 {% endif %}
diff --git a/docs/product/foundation/accessibility.html b/docs/product/foundation/accessibility.html
index abf6566de0..163c983897 100644
--- a/docs/product/foundation/accessibility.html
+++ b/docs/product/foundation/accessibility.html
@@ -108,8 +108,8 @@
                 </button>
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
@@ -135,8 +135,8 @@
                 </button>
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
@@ -160,8 +160,8 @@
 
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
@@ -199,8 +199,8 @@
 
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
@@ -234,8 +234,8 @@
 
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
@@ -286,8 +286,8 @@
 
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
@@ -308,8 +308,8 @@
 
                 {% render 'annotation.html',
                     text: group.description,
-                    style: "margin-left: 50%;",
-                    customHeight: 16
+                    classes: "mx-auto",
+                    connectorHeight: 16
                 %}
             </div>
         {% endfor %}
diff --git a/docs/product/foundation/color-fundamentals.html b/docs/product/foundation/color-fundamentals.html
index d378b3df77..7303839647 100644
--- a/docs/product/foundation/color-fundamentals.html
+++ b/docs/product/foundation/color-fundamentals.html
@@ -169,7 +169,7 @@
                 {% render 'annotation.html',
                     text: "Input borders",
                     classes: "sm:d-none",
-                    style: "margin-left: calc((1.5/11) * 100%);"
+                    style: "margin-left: calc((1/11) * 100%); min-width: calc((1/11) * 100%)"
                 %}
             </div>
         </div>
@@ -195,8 +195,8 @@
                 %}
                 {% render 'annotation.html',
                     text: "Heading",
-                    style: "margin-left: calc((.5/11) * 100%);",
-                    classes: "sm:d-none"
+                    style: "min-width: calc((1/11) * 100%)",
+                    classes: "sm:d-none fl-shrink1"
                 %}
             </div>
         </div>
@@ -212,12 +212,12 @@
             <div class="d-flex w100">
                 {% render 'annotation.html',
                     text: "Illustrations",
-                    style: "margin-left: calc((7.5/11) * 100%)",
-                    classes: "sm:d-none"
+                    style: "margin-left: calc((7/11) * 100%); min-width: calc((1/11) * 100%)",
+                    classes: "sm:d-none",
                 %}
                 {% render 'annotation.html',
                     text: "Icons",
-                    style: "margin-left: calc((.5/11) * 100%); width: calc((2/11) * 100%)",
+                    style: "width: calc((2/11) * 100%)",
                     classes: "sm:d-none",
                     range: true
                 %}
@@ -344,6 +344,7 @@
                         <div class="fs-title {{group.textClasses}}">Text</div>
                         {% render 'annotation.html',
                             text: group.name,
+                            classes: "mx-auto",
                             style: "margin-left: 50%;"
                         %}
                     </div>
@@ -363,6 +364,7 @@
                     <button class="s-btn s-btn__filled {{group.classes}}" {{group.attr}} role="presentation">Button</button>
                     {% render 'annotation.html',
                         text: group.name,
+                        classes: "mx-auto",
                         style: "margin-left: 50%;"
                     %}
                 </div>