Builder Responsive: Responsive Support Function Parameters

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
 
(3 intermediate revisions by one user not shown)
Line 9: Line 9:
 
</pre>
 
</pre>
  
==== mobile-width ====
+
== mobile-width ==
  
Ex.:
+
Example:
  
 
<pre class="brush:php;gutter: false;">
 
<pre class="brush:php;gutter: false;">
Line 19: Line 19:
 
<code>mobile-width</code> is used to determine what width is considered to be "mobile". In Builder's responsive feature, this width is used to cause the styling in the <code>style-mobile.css</code> file to take effect and is used to figure out when to add the auto-generated margins. The default value of <code>mobile-width</code> is 500px.
 
<code>mobile-width</code> is used to determine what width is considered to be "mobile". In Builder's responsive feature, this width is used to cause the styling in the <code>style-mobile.css</code> file to take effect and is used to figure out when to add the auto-generated margins. The default value of <code>mobile-width</code> is 500px.
  
==== tablet-width ====
+
== tablet-width ==
  
Ex.:
+
Example:
  
 
<pre class="brush:php;gutter: false;">
 
<pre class="brush:php;gutter: false;">
Line 29: Line 29:
 
<code>tablet-width</code> is used to determine what width is considered to be "tablet". In Builder's responsive feature, this width is used to cause the styling in the <code>style-tablet.css</code> file to take effect.
 
<code>tablet-width</code> is used to determine what width is considered to be "tablet". In Builder's responsive feature, this width is used to cause the styling in the <code>style-tablet.css</code> file to take effect.
  
==== enable-breakpoints ====
+
== enable-breakpoints ==
  
Ex.:
+
Example:
  
 
<pre class="brush:php;gutter: false;">
 
<pre class="brush:php;gutter: false;">
Line 39: Line 39:
 
By setting enable-breakpoints to false, Builder will no longer generate the responsive breakpoints, essentially changing the design into a fluid design with a max width.
 
By setting enable-breakpoints to false, Builder will no longer generate the responsive breakpoints, essentially changing the design into a fluid design with a max width.
  
==== enable-auto-margins ====
+
== enable-auto-margins ==
  
Ex.:
+
Example:
  
 
<pre class="brush:php;gutter: false;">
 
<pre class="brush:php;gutter: false;">
Line 49: Line 49:
 
By default, Builder's responsive feature adds margins to the sides of the Layout as the browser width starts to shrink. This is to ensure that the Layout is pushed away from the edges of the device. If this isn't needed, for example, when you want to achieve an adaptive design, we can set <code>enable-auto-margins</code> to false in order to disable this feature.
 
By default, Builder's responsive feature adds margins to the sides of the Layout as the browser width starts to shrink. This is to ensure that the Layout is pushed away from the edges of the device. If this isn't needed, for example, when you want to achieve an adaptive design, we can set <code>enable-auto-margins</code> to false in order to disable this feature.
  
==== column-min-width ====
+
== column-min-width ==
  
 
To prevent early breaking of the layout, you could add the following code to your child theme's functions.php:
 
To prevent early breaking of the layout, you could add the following code to your child theme's functions.php:
Line 58: Line 58:
  
 
Source: http://ithemes.com/forum/topic/38649-responsive-issue-border-around-site-left-nav/#entry176890
 
Source: http://ithemes.com/forum/topic/38649-responsive-issue-border-around-site-left-nav/#entry176890
 +
 +
== See also ==
 +
* [[Builder_Responsive:_Introduction|Introduction]]
 +
* [[Builder_Responsive:_Videos|Videos]]
 +
* [[Builder_Responsive:_Stylesheets| Stylesheets]]
 +
* [[Builder_Responsive:_Responsive_Support_Function_Parameters| Responsive Support Function Paramaters]]
 +
* [[Builder_Responsive:_Responsive_vs._Adaptive|Responsive vs. Adaptive]]
 +
* [[Builder_Responsive:_FAQ| FAQ]]
 +
 +
<br />
 +
[[:Builder_Test|← Back to Builder Codex Home]]

Latest revision as of 10:22, July 19, 2013

Contents

Add Theme Support Builder Responsive Function Parameters

Examples:

1.

add_theme_support( 'builder-responsive', array('tablet-width' => '800px', 'mobile-width' => '400px' ));

mobile-width

Example:

add_theme_support( 'builder-responsive', array( 'mobile-width' => '400px' ) );

mobile-width is used to determine what width is considered to be "mobile". In Builder's responsive feature, this width is used to cause the styling in the style-mobile.css file to take effect and is used to figure out when to add the auto-generated margins. The default value of mobile-width is 500px.

tablet-width

Example:

add_theme_support( 'builder-responsive', array( 'tablet-width' => '800px' ) );

tablet-width is used to determine what width is considered to be "tablet". In Builder's responsive feature, this width is used to cause the styling in the style-tablet.css file to take effect.

enable-breakpoints

Example:

add_theme_support( 'builder-responsive', array( 'enable-breakpoints' => false ) );

By setting enable-breakpoints to false, Builder will no longer generate the responsive breakpoints, essentially changing the design into a fluid design with a max width.

enable-auto-margins

Example:

add_theme_support( 'builder-responsive', array( 'enable-auto-margins' => false );

By default, Builder's responsive feature adds margins to the sides of the Layout as the browser width starts to shrink. This is to ensure that the Layout is pushed away from the edges of the device. If this isn't needed, for example, when you want to achieve an adaptive design, we can set enable-auto-margins to false in order to disable this feature.

column-min-width

To prevent early breaking of the layout, you could add the following code to your child theme's functions.php:

add_theme_support( 'builder-responsive', array( 'column-min-width' => '100' ) );

Source: http://ithemes.com/forum/topic/38649-responsive-issue-border-around-site-left-nav/#entry176890

See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox