Device Targeting

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.

Column Realignment

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.

Declare By Layout

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.