855861: Need to update heading name and sample output.

blazor/media-query/media-query-integration.md

@@ -7,7 +7,7 @@ control: Media Query
 documentation: ug
 ---
 
-# Media Query with other components integration
+# Blazor Media Query with other component integration
 
 The Blazor Media Query component enhances the responsiveness of web application, allowing you to perform conditional rendering or styling to achieve a dynamic UI adpatable for various screen sizes.
 
@@ -82,4 +82,14 @@ Active media name: <b>@activeBreakpoint</b>
 
 ```
 
-![Blazor Media Query integration in Grid](images/blazor-media-query-with-grid.gif)
+ActiveBreakPoint as `Large`:
+
+![Blazor Media Query integration in Grid with activeBreakpoint as large](images/blazor-media-query-large-with-grid.png)
+
+ActiveBreakPoint as `Medium`:
+
+![Blazor Media Query integration in Grid with activeBreakpoint as medium](images/blazor-media-query-medium-with-grid.png)
+
+ActiveBreakPoint as `Small`:
+
+![Blazor Media Query integration in Grid with activeBreakpoint as small](images/blazor-media-query-small-with-grid.png)

blazor/media-query/media-query-reusable.md

@@ -57,26 +57,26 @@ In the below example, the `activeBreakPoint` was accessed in the **Home.razor**
 {% tabs %}
 {% highlight C# tabtitle="Home" hl_lines="3 10" %}
 
-The active breakpoint is @activeBreakPointValue
+The active breakpoint is @activeBreakPoint
 <br/><br/>
 <h5>Home Page</h5>
 
 @code {
     [CascadingParameter]
-    public string activeBreakPointValue { get; set; }
+    public string activeBreakPoint { get; set; }
 }
 ....
 
 {% endhighlight %}
 {% highlight C# tabtitle="Counter" hl_lines="3 11" %}
 
-The active breakpoint is @activeBreakPointValue
+The active breakpoint is @activeBreakPoint
 <br /><br />
 <h5>Counter Page</h5>
 
 @code {
     [CascadingParameter]
-    public string activeBreakPointValue { get; set; }
+    public string activeBreakPoint { get; set; }
 }
 ....