Update styling-layout.mdx

ajay-dhangar · web-flow · commit cd95efee940a · 2025-12-27T09:28:41.000+05:30
diff --git a/docs/styling-layout.mdx b/docs/styling-layout.mdx
@@ -1,12 +1,11 @@
 ---
+title: Styling and Layout
 description: "A Docusaurus site is a pre-rendered single-page React application. You can style it the way you style React apps"
 ---
 
 import ColorGenerator from '@site/src/components/ColorGenerator';
 import IframeWindow from '@site/src/components/BrowserWindow/IframeWindow';
 
-# Styling and Layout
-
 :::tip
 This section focuses on styling through stylesheets.  
 For advanced customizations (DOM structure, React code…), refer to the [Swizzling Guide](https://docusaurus.io/docs/swizzling).
@@ -87,8 +86,6 @@ import CodeBlock from '@theme/CodeBlock';
 
 </details>
 
-<AdsComponent />
-
 ## Styling with Infima {#styling-your-site-with-infima}
 
 Docusaurus classic theme uses [Infima](https://infima.dev/) for base layout and components.
@@ -107,8 +104,6 @@ Use [ColorBox](https://www.colorbox.io/) or the generator below to create your s
 
 <ColorGenerator />
 
-<AdsComponent />
-
 ## Dark Mode {#dark-mode}
 
 The `<html>` element switches its `data-theme` attribute:
@@ -127,8 +122,6 @@ Example:
 }
 ```
 
-<AdsComponent />
-
 ## Data Attributes {#data-attributes}
 
 You can inject `<html>` data attributes via query strings (`docusaurus-data-<key>`):
@@ -147,8 +140,6 @@ html[data-red-border] div#__docusaurus {
 
 Useful for embedding docs in iframes with custom layouts.
 
-<AdsComponent />
-
 ## Mobile View {#mobile-view}
 
 The default breakpoint between desktop and mobile is `996px`.
@@ -267,4 +258,4 @@ Update `tsconfig.json`:
 +    "types": ["docusaurus-plugin-sass"]
   }
 }
-```
+```
