Enable Modules in Mobile Display

I am having an issue enabling the following modules in mobile view:

- header_right
- header_left

When viewing our homepage in mobile view these modules do not appear.
Assuming they do we need them to be responsive.

http://www.speckmasters.com/live

Thanks in advance,
James

Hello,

These module areas have not enough space for display under the mobile devices. If you really need to display them, then you can disable the code with display: none for these areas under the mobile.css file, but you will need to adjust their layout by yourself as it is a custom work beyond of our technical support.

hi,
I would like to figure out how to change the width that makes it disappear.
I think that the resolution of the tablet can remain, but now disappears, while I would not be seeing on smartphones
Is possible to set the resolution that makes it disappear?

tnx

The dimension when the modules disappears is controled by the mobile template width under the "Layouts" tab in the template settings.

hi and thanks for the reply.

but is not what I meant... I had seen that changing "Tablet width" under "layouts" tab in the template setting my ipad shows the video module... but it shows also desktop menu and everything else that should not show.

I would like to understanding of how to make that "only" the video module is shown even when you are in the mobile resolution, and to do that I should understand how to make it show up to 1024px of resolution.
there must be a file and a line of code that determines this right?

tnx

If you want to show the video module all time, please remove from this module the onlydesktop module suffix and please find in the mobile.css the following fragment:

Code: Select all

#gkHeaderLeft, #gkHeaderRight {
display: none;
}

and replace it to:

Code: Select all

#gkHeaderRight {
display: none;
}

tnx dziudek,
but if I wanted to make it visible only up to 1024px resolution and make it disappear when the resolution is lower than 1024px?
in this way would be visible on the tablet and not visible on smartphones.

is possible?

You will have to use media queries like:

Code: Select all

@media (min-width: 1025px) { #gkHeaderLeft { display: block!important; } }
@media (max-width: 1024px) { #gkHeaderLeft { display: none!important; } }

in the css/template.css file.