hiding page blocks on mobile devices.

We all have the struggle of making our sites more mobile friendly and because 75% of my visits are from mobile device.

Mobile screen space is limited; there are page blocks we can do without to save space on mobile devices; so we can have a smoother flow for our mobile users.

Edit: /inc/classes/BxDolPageViewAdmin.php

around line 511 (7.2.1) or 544 (7.3) find:

                'DesignBox' => array(
                   'type' => 'select',
                    'name' => 'DesignBox',
                    'caption' => $sDesignBoxLangKeyC,
                    'value' => $aItem['DesignBox'],
                    'values' => array(
                        array('key' => 2, 'value' => _t('_adm_pbuilder_DesignBox_2')),
                        array('key' => 0, 'value' => _t('_adm_pbuilder_DesignBox_0')),
                        array('key' => 11, 'value' => _t('_adm_pbuilder_DesignBox_11')),
                        array('key' => 1, 'value' => _t('_adm_pbuilder_DesignBox_1')),
                        array('key' => 13, 'value' => _t('_adm_pbuilder_DesignBox_13')),
                        array('key' => 3, 'value' => _t('_adm_pbuilder_DesignBox_3')),
                    ),
                    'required' => true,
                ),

Change it to:

                'DesignBox' => array(
                    'type' => 'select',
                    'name' => 'DesignBox',
                    'caption' => $sDesignBoxLangKeyC,
                    'value' => $aItem['DesignBox'],
                    'values' => array(
                        array('key' => 2, 'value' => _t('_adm_pbuilder_DesignBox_2')),
                        array('key' => 0, 'value' => _t('_adm_pbuilder_DesignBox_0')),
                        array('key' => 11, 'value' => _t('_adm_pbuilder_DesignBox_11')),
                        array('key' => 1, 'value' => _t('_adm_pbuilder_DesignBox_1')),
                        array('key' => 13, 'value' => _t('_adm_pbuilder_DesignBox_13')),
                        array('key' => 3, 'value' => _t('_adm_pbuilder_DesignBox_3')),
                        array('key' => 70, 'value' => _t('_adm_pbuilder_DesignBox_70'))
                        array('key' => 71, 'value' => _t('_adm_pbuilder_DesignBox_71')),
                        array('key' => 72, 'value' => _t('_adm_pbuilder_DesignBox_72')),
                        array('key' => 73, 'value' => _t('_adm_pbuilder_DesignBox_73')),
                        array('key' => 74, 'value' => _t('_adm_pbuilder_DesignBox_74')),
                    ),
                    'required' => true,
                ),

Add languages keys:

Category: system

Key: _adm_pbuilder_DesignBox_70

String: Mobile Hide No Box

Key: _adm_pbuilder_DesignBox_71

String: Mobile Hide Box (title, padding)

Key: _adm_pbuilder_DesignBox_72

String: Mobile Hide Box (title, no padding)

Key: _adm_pbuilder_DesignBox_73

String: Mobile Hide Box (no title, padding)

Key: _adm_pbuilder_DesignBox_74

String: Mobile Hide Box (no title, no padding)

Copy attached "designbox_7x.html" files to: /templates/base/

Hello arkane202

          I added the code, I am trying to access the the Design box layout for the _html block, when clicking on the html block in page builder under (homepage) it said that no properties have been assigned...I also search the _html block from "languages" but it didn't have the design box layout.

Thank you

Lanay

you have to place the _html_block in a column before you can edit the properties. if you added the code, all blocks should give additional design box options

the mobile app really sucks - in my opinion. With the introduction of the evo responsive template - yo uwill get better functionality than using the mobile app. A lot of functionality is not carried over to the website and it is very limited.

the new evo template makes viewing websites on mobile devices way better.

we been doing a new android / ios build out for the past 3 months with a new mobile api, its been coming along pretty well.

Do you know a code that can hide items in the navigation menu on mobile devices?

So I can still have the old chat module on my site. I don't think web RTC will work for me since many browsers don't support it. I thought the RTC guys would've thought of a workaround by now, but I guess not. I need video chat to work.

 @ arkane220 ~ Thanks for the info..it worked!

i run a fancy jquery sticky navbar with a drop downs on mobile and hide everything above the main body. basically my site looks entirely different on desktop vs mobile.

i plan on doing a write up and posting some of my major modifications.

Hi Arkane,

I'd be interested in checking out this navbar. You'd just add that as a block in the "Mobile Pages Builder -> Homepage"  yes?

This is my setup (videos module home)

top - desktop

left - mobile  - nav closed

right - mobile - nav open

- logo changes to icon to save space on navbar

- everything above main page content is hidden on mobile

- "my videos" / "upload buttons" show on mobile only

- navbar sticky to the top

- service menu moves to navbar on mobile

- changes from desktop to mobile at 720px

I can not get this to work on 7.3 for the life of me. tried several times.

 Make sure to add the missing (,) when you copy the code after array('key' => 70, 'value' => _t('_adm_pbuilder_DesignBox_70'))

Ty that was the problem I kept over looking.