Change stacking behavior of grid cells on phone

Hey rdswestnet,

To change the stacking order of the grids in mobile we need to create 2 sets of grids one for desktop view and one for mobile view and then we will use custom CSS to hide one of the sets in mobile and one set on the desktop.

1. Enable custom css class name for ALB elements http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

2. Add this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

/*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

3. Add class name “only_desktop” and “only_mobile” to the icon box set’s to be displayed only on desktop and only on mobile.

Best regards,
Vinay

Hi Rob,

If you don’t use a child theme then it would overwritten during theme update and yes it would cause the css that uses the class name won’t be used. I would suggest using a child theme, you can refer on this post: http://kriesi.at/documentation/enfold/using-a-child-theme/

Best regards,
Nikko