[teaser]This theme is responsive and changes its layout to work better on mobile devices. However, we also give you shortcodes with lots of customized ability. In fact, we give you so much custom ability, that you can make custom layouts that don’t act responsively by hard coding your own widths and custom layouts into the shortcodes. For example if you set an explicit width on an image, then it will no longer fluidly resize. This may be exactly what you intended, but it’s bad for responsiveness! Because of this we include a few ways where you can take direct control over how your elements display on desktops vs. tablets vs. phones.[/teaser] [line] [h4]Column Realignment[/h4] The simplest way to make due with less space in a responsive design is to stack all columns vertically instead of side by side. This is a common thing that most responsive themes do. We don’t…at least not by default. We’ve found that if you just apply the idea will-nilly to every column then you really break a lot of layouts. We make it optional. You can include a simple attribute on any column shortcode to choose to make it behave in that responsive manner, or not. The columns below act normally on desktop, but stack vertically on phones, giving the content inside the space it needs on the smaller screen. [column_one_third simplephone=”yes”]
[h4]1[/h4]
[/column_one_third] [column_one_third simplephone=”yes”]
[h4]2[/h4]
[/column_one_third] [column_one_third simplephone=”yes”]
[h4]3[/h4]
[/column_one_third] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][column_one_third simplephone=”yes”]
[h4]1[/h4]
[/column_one_third][/code_line] [code_line][column_one_third simplephone=”yes”]
[h4]2[/h4]
[/column_one_third][/code_line] [code_line][column_one_third simplephone=”yes”]
[h4]3[/h4]
[/column_one_third][/code_line] [/code_table] [/toggle_box] [line] [h4]Declare By Layout[/h4] The above is the simple solution that makes everything perfect 99% of the time. But when dealing with more advanced layout, sometimes you need more control than that. Sometimes you need to specifically declare one set of content/shortcodes for one device, and different sets of content/shortcodes for others. So we give you shortcodes which let you do that. [desktop_only]
This box only displays with the desktop layout of the theme.
[/desktop_only] [tablet_only]
This box only displays with the tablet layout of the theme.
[/tablet_only] [phone_only]
This box only displays with the phone layout of the theme.
[/phone_only] [desktop_tablet_only]
This box only displays with the desktop or tablet layouts of the theme.
[/desktop_tablet_only] [tablet_phone_only]
This box only displays with the tablet or phone layouts of the theme.
[/tablet_phone_only] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][desktop_only]
This box only displays with the desktop layout of the theme.
[/desktop_only][/code_line] [code_line][tablet_only]
This box only displays with the tablet layout of the theme.
[/tablet_only][/code_line] [code_line][phone_only]
This box only displays with the phone layout of the theme.
[/phone_only][/code_line] [code_line][desktop_tablet_only]
This box only displays with the desktop or tablet layouts of the theme.
[/desktop_tablet_only][/code_line] [code_line][tablet_phone_only]
This box only displays with the tablet or phone layouts of the theme.
[/tablet_phone_only][/code_line] [/code_table] [/toggle_box]

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Leave a Reply

Your email address will not be published. Required fields are marked *