hotfix: fixed image formatting in grafana docs

kazunoko1 · Mar 2, 2022 · 19f84ad · 19f84ad
1 parent f2fd014
commit 19f84ad
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/assets/styles/layouts/article/_tabbed-content.scss b/assets/styles/layouts/article/_tabbed-content.scss
@@ -97,7 +97,7 @@
   margin: .75rem 0 3rem;
   width: 100%;
 
-  & > :not(table, .fs-diagram) {
+  & > :not(table, .fs-diagram, img) {
     width: 100%;
     margin-left: 0;
   }

diff --git a/content/influxdb/cloud/tools/grafana.md b/content/influxdb/cloud/tools/grafana.md
@@ -60,10 +60,11 @@ configure your InfluxDB connection:
     - **Default Bucket**: The default [bucket](/influxdb/cloud/organizations/buckets/) to use in Flux queries.
     - **Min time interval**: The [Grafana minimum time interval](https://grafana.com/docs/grafana/latest/features/datasources/influxdb/#min-time-interval).
 
-    {{< img-hd src="/img/influxdb/cloud-tools-grafana.png" />}}
-
 2. Click **Save & Test**. Grafana attempts to connect to the InfluxDB datasource
    and returns the results of the test.
+
+{{< img-hd src="/img/influxdb/cloud-tools-grafana.png" />}}
+
 {{% /tab-content %}}
 <!----------------------------- END FLUX CONTENT ----------------------------->
 <!-------------------------- BEGIN INFLUXQL CONTENT -------------------------->
@@ -194,11 +195,11 @@ With **InfluxQL** selected as the query language in your InfluxDB data source se
     - **Password**: Leave empty
     - **HTTP Method**: Select **GET**
 
-    <!--  -->
-    {{< img-hd src="/img/influxdb/cloud-tools-grafana-influxql.png" />}}
-
 3. Click **Save & Test**. Grafana attempts to connect to the InfluxDB Cloud data source
    and returns the results of the test.
+
+{{< img-hd src="/img/influxdb/cloud-tools-grafana-influxql.png" />}}
+
 {{% /tab-content %}}
 <!--------------------------- END INFLUXQL CONTENT --------------------------->
 {{< /tabs-wrapper >}}

diff --git a/content/influxdb/v2.1/tools/grafana.md b/content/influxdb/v2.1/tools/grafana.md
@@ -59,10 +59,11 @@ configure your InfluxDB connection:
     - **Default Bucket**: The default [bucket](/influxdb/v2.1/organizations/buckets/) to use in Flux queries.
     - **Min time interval**: The [Grafana minimum time interval](https://grafana.com/docs/grafana/latest/features/datasources/influxdb/#min-time-interval).
 
-    {{< img-hd src="/img/influxdb/2-0-tools-grafana.png" />}}
-
 2. Click **Save & Test**. Grafana attempts to connect to the InfluxDB {{< current-version >}} datasource
    and returns the results of the test.
+
+{{< img-hd src="/img/influxdb/2-0-tools-grafana.png" />}}
+
 {{% /tab-content %}}
 <!----------------------------- END FLUX CONTENT ----------------------------->
 <!-------------------------- BEGIN INFLUXQL CONTENT -------------------------->
@@ -238,11 +239,11 @@ With **InfluxQL** selected as the query language in your InfluxDB data source se
         - **Password**: Enter the password associated with your [InfluxDB 1.x compatibility authorization](#view-and-create-influxdb-dbrp-mappings)
         - **HTTP Method**: Select **GET**
 
-        <!--  -->
-        {{< img-hd src="/img/influxdb/2-0-tools-grafana-influxql.png" />}}
-
 3. Click **Save & Test**. Grafana attempts to connect to the InfluxDB {{< current-version >}} data source
    and returns the results of the test.
+
+{{< img-hd src="/img/influxdb/2-0-tools-grafana-influxql.png" />}}
+
 {{% /tab-content %}}
 <!--------------------------- END INFLUXQL CONTENT --------------------------->
 {{< /tabs-wrapper >}}