Extended Changes

Signed-off-by: krishnaShuk <shuklakrishna.kris@gmail.com>

Author: KrishnaShuk

content-learn/mastering-meshery/introduction-to-meshery/meshery/interpreting-meshery-designs.mdx

@@ -55,7 +55,7 @@ These components encapsulate the resources and include their detailed configurat
 <h2 class="chapter-sub-heading">Meshery Design at a Glance</h2>
 
 <a href={basicDesign}>
-  <img class="image-design" src={basicDesign} width="100%" align="center" />
+  <img class="image-design-2" src={basicDesign} width="100%" align="center" />
 </a>
 
 
@@ -93,7 +93,7 @@ Let's explore a few of these categories.
 1. **Triangles**:
 
     <img
-      class="image-design"
+      class="image-design-icons"
       src={Triangles}
       align="center"
       width="25%"
@@ -109,7 +109,7 @@ Let's explore a few of these categories.
 2. **Rectangles**:
 
     <img
-      class="image-design"
+      class="image-design-icons"
       src={Rectangles}
       align="center"
       width="25%"
@@ -126,7 +126,7 @@ Let's explore a few of these categories.
 3. **User Icons**:
 
     <img
-      class="image-design"
+      class="image-design-icons"
       src={Users}
       align="center"
       width="25%"
@@ -141,7 +141,7 @@ Let's explore a few of these categories.
 4. **Cylinders**:
 
     <img
-      class="image-design"
+      class="image-design-icons"
       src={Cylinders}
       align="center"
       width="25%"
@@ -167,7 +167,7 @@ Note that users have the flexibility to **customize** these arrow styles to suit
 **Edge Relationships**
 
 <img
-  class="image-design"
+  class="image-design-icons"
   src={DashedArrows}
   align="center"
   width="25%"
@@ -178,7 +178,7 @@ These are used to indicate traffic flow and relationships between components. Th
 **Annotations**
 
 <img
-  class="image-design"
+  class="image-design-icons"
   src={AnnotationArrow}
   align="center"
   width="25%"
@@ -191,7 +191,7 @@ These are used to denote annotations or static connections between components. T
 1. **Edge-Network Relationship**: Represented by a dashed arrow with **port/network protocol**.
 
 <img
-  class="image-design"
+  class="image-design-icons"
   src={NetworkEdgeRelationship}
   align="center"
   width="50%"
@@ -212,7 +212,7 @@ These are used to denote annotations or static connections between components. T
 The intermediary component (such as a RoleBinding) connects the two, defining how permissions are assigned. For example, a dashed arrow from a `Role` to a `ServiceAccount` with a `RoleBinding` in the middle shows the connection established by the RoleBinding, which links the specific role to the service account and grants the appropriate permissions.
 
 <img
-  class="image-design"
+  class="image-design-icons"
   src={EdgePermissions}
   align="center"
   width="50%"
@@ -236,7 +236,7 @@ Meshery extends and offers support for numerous [integrations](https://docs.mesh
 In Meshery, these integrated components are distinctly represented by their specific logos as icons and various shapes. These components can be found in `Components` in the dock.
 
 <img
-  class="image-design"
+  class="image-design-icons"
   src={Integrations}
   align="center"
   width="50%"

src/components/Learn-Components/Chapters-Style/chapters.style.js

@@ -18,12 +18,33 @@ export const ChapterStyle = styled.div`
   }
   }
 
-  div[style*="width:100%"][style*="height:auto"] {
+  div[style*="width: 100%"][style*="overflow"] {
     aspect-ratio: unset !important;
-    margin: 20px;
+    overflow: unset !important;
+    margin: 20px 0px 20px 0px !important;
   }
 
-  .image-design {
+  .image-design-icons {
     object-fit: contain !important; 
+
+    @media (max-width: 768px) {
+      width: clamp(200px, 60vw, 400px) !important;
+      height: auto !important;
+      max-width: none !important;
+    }
+    
+    @media (max-width: 480px) {
+      width: clamp(150px, 70vw, 350px) !important;
+    }
+
   }
+  
+  .image-design {
+    object-fit: contain !important;
+  }
+
+  .image-design-2 {
+    aspect-ratio: unset !important;
+    object-fit: contain !important;
+  } 
 `;