Merge branch 'MAGEDOC-3438' into 1.0.0-beta-release

Author: bdenham

docs/configurations/responsive-layout-configuration.md

@@ -1,16 +1,15 @@
-# Responsive layouts
+# Overwriting responsive breakpoints
 
-<!-- {% raw %} -->
+This topic describes how to change the default mobile breakpoint in Page Builder.
 
-## What's in this topic
+## Default mobile breakpoint
 
-This topic describes how to use your custom themes to control responsive layouts within Page Builder.
-
-## Responsive Mobile Images
-
-By default, when you configure Page Builder to render a background image for a container, it uses a mobile image when the container's width is less than the industry-standard max-width of 768px. This width is configured within `Magento_PageBuilder/etc/view.xml`, as follows:
+By default, when you configure Page Builder to render a background image for a container, it uses a mobile image when the container's width is equal to and less than 768px. Page Builder defines this mobile breakpoint in the `Magento_PageBuilder/etc/view.xml` file, as shown here:
 
 ```xml
+<?xml version="1.0"?>
+<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
+...
 <vars module="Magento_PageBuilder">
     <var name="breakpoints">
         <var name="mobile">
@@ -22,24 +21,32 @@ By default, when you configure Page Builder to render a background image for a c
 </vars>
 ```
 
-If your custom theme also uses this max-width breakpoint for your mobile layout, no additional configuration is required.
+## Changing the mobile breakpoint
+
+If your custom theme also uses this max-width breakpoint for your mobile layout, no changes are required.
+
+However, if your custom theme uses a different mobile breakpoint, you need to overwrite the default breakpoint by either: 
 
-However, if your custom theme uses a different mobile breakpoint, you'll need to add that breakpoint (in pixels) to your theme's `view.xml` by including the following XML within the `<view />` node, and replacing `CUSTOM-BREAKPOINT` with the integer value of your theme's breakpoint, as follows:
+1. Adding the theme's breakpoint to the theme's `view.xml` file.
+2. Adding a `view.xml` file in the `etc` directory of your content type as shown here:
+
+    ![product conditions](../images/how-to-change-breakpoint.png "Add view.xml file")
+
+In either case, if your theme uses a mobile breakpoint `max-width` of `600px`, you would add the following markup to the `view.xml` file:
 
 ```xml
-<vars module="Magento_PageBuilder">
-    <var name="breakpoints">
-        <var name="mobile">
-            <var name="conditions">
-                <var name="max-width">CUSTOM-BREAKPOINTpx</var>
+<?xml version="1.0"?>
+<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
+    <vars module="Magento_PageBuilder">
+        <var name="breakpoints">
+            <var name="mobile">
+                <var name="conditions">
+                    <var name="max-width">600px</var>
+                </var>
             </var>
         </var>
-    </var>
-</vars>
+    </vars>
+</view>
 ```
 
-This directs Page Builder to use your theme's mobile breakpoint instead of its default breakpoint of 768px. Other responsive breakpoints from your custom theme can be added in the same way.
-
-[Note: I think it might be nice to include another example or two of configuring other breakpoints (or other styles?) from custom themes as relevant.]
-
-<!-- {% endraw %} -->
+This directs Page Builder to use this mobile breakpoint instead of its default breakpoint of 768px. Other responsive breakpoints from your custom theme can be added in the same way.