Update

Signed-off-by: Zihan Kuang <[email protected]>

Author: zihanKuang

assets/scss/_styles_project.scss

@@ -128,7 +128,7 @@ body {
   img.md-image-responsive {
     display: block;
     width: 100%;
-    max-width: clamp(320px, 80vw, 800px);
+    max-width: clamp(320px, 100%, 800px);
     height: auto;
     margin: 0 auto;
     object-fit: contain;
@@ -470,9 +470,9 @@ a:not([href]):not([class]):hover {
 }
 
 .td-content figure,
-.td-content figure[style*="width"] {
-  width: 100%;
-  max-width: clamp(320px, 80vw, 800px);
+.td-content figure {
+  width: max-content;
+  max-width: clamp(320px, 100%, 700px);
   margin: 0 auto 2rem auto;
   box-sizing: border-box;
   display: flex;
@@ -481,6 +481,7 @@ a:not([href]):not([class]):hover {
 }
 
 .td-content figure > img {
+  width: auto;
   max-width: 100%;
   border-radius: .5rem .5rem 0 0;
   box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);

content/en/kanvas/designer/comments/index.md

@@ -173,6 +173,7 @@ If you plan to keep certain comments in your design for documentation, team refe
 
 <figure>
   <img src="./naming-comments.png" alt="Naming a comment in Designer" />
+    <figcaption>Naming a comment in Designer</figcaption>
 </figure>
 
 {{< alert type="info" title="Best Practice" >}}