How to hide modules in mobile view?

GK User
Fri Jan 30, 2015 9:21 am
Hey guys!

I would like one module not to be displayed in mobile view.

http://cool-o-mat.com/zentrum/cms/index.php/zentrum
(it's the one with the sitemap at the bottom)

How can this be achieved?

Thank you very much for your support in advance!
User avatar
Expert Boarder

GK User
Fri Jan 30, 2015 9:29 am
User avatar
Platinum Boarder

GK User
Fri Jan 30, 2015 9:31 am
BTW
I might be wrong but I don't see left padding for whole content
User avatar
Platinum Boarder

GK User
Fri Jan 30, 2015 9:39 am
Oscar E wrote:hi,
sure it's possible.
https://www.gavick.com/documentation/un ... let-layout


Yeah - too easy, if you can read the documentation :-)
Thank you very much!
User avatar
Expert Boarder

GK User
Fri Jan 30, 2015 9:40 am
Oscar E wrote:BTW
I might be wrong but I don't see left padding for whole content


Yes that's only in maximum with-view.
Unfortunately I do not havy any idea where that came from...
User avatar
Expert Boarder

GK User
Fri Jan 30, 2015 12:11 pm
Now is okey again.
I guess you've found a issue.

TIP: add title description for email icon (white envelope) on menu bar, right now people may be confused how it works.
User avatar
Platinum Boarder

GK User
Sun Feb 08, 2015 11:08 am
Somehow the module display suffix "nomobile" does have no effect on the search module at the top right :-/
The module still is visible in mobile view and does switch it's position so that it overlays the menu...

Another issue is, that the logo at the left disappears at a certain display width and comes back again in smaller size.

I really have no idea how to fix these issues.

Here's the link again - and I am really thankful for any help!
http://cool-o-mat.com/zentrum/cms/
User avatar
Expert Boarder

GK User
Sun Feb 08, 2015 11:15 am
It also seems, that the "nomobile" suffix has absolutely no effect on the modules "logo" and "search" actually...
User avatar
Expert Boarder

GK User
Sun Feb 08, 2015 11:24 am
yep, for logo it don't work.
so you have to add your custom CSS code to hide this element on mobile view.
User avatar
Platinum Boarder

GK User
Sun Feb 08, 2015 11:34 am
Oscar E wrote:yep, for logo it don't work.
so you have to add your custom CSS code to hide this element on mobile view.

Unfortunately I do not use the logo functionality added by the template (as this did the job totally weird).

I usw the "Logo" module at "topnav" position and the "search" module at "search" position. Both modules do not respond on "nomobile" suffix.

Here's my entire custom CSS-code - hopefully that helps...

Code: Select all
.gkIsWrapper-gk_musicstate figcaption > h2 {
    color: inherit;
    font-family: 'Raleway';
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: 35px;
    padding: 0;
    text-shadow: 1px 1px 2px #999;
}

.box {
    color: #000;
    line-height: 1.6;
    font-family: 'Raleway';
}

.gk-header2 h4 {
    font-size: 22px;
    font-weight: bold;
}


.box .header {
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    padding: 0 0 32px;
    text-transform: uppercase;
    font-family: 'Raleway';
}

.nspArt p.nspText {
    display: block !important;
    margin: 0;
    padding: 0 !important;
    color: #000;
    font-family: 'Raleway';
}

.nspArt h4.nspHeader {
    color: #000;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
}

h2 {
    font-size: 25px;
    font-weight: bold;
}

h3 {
    font-size: 30px;
    font-weight: regular;
}


h4 {
    font-size: 20px;
    font-weight: regular;
}

t1 {
    font-size: 24px;
    font-weight: bold;
}

t2 {
    font-size: 16px;
    font-weight: regular;
}

    #gkMainbody {
        margin-bottom: -50px;
    }

.newstyle {  outline:1px solid red;  min-height:5px; }

.gkIsWrapper-gk_storefront figcaption {
    left: 25%;
    top: 85%;
}

.topnav2 {
        margin-left:20px;   
        float: right;
   height: 30px;
   line-height: 30px;
}


.logo {
   float: left;
   padding-left: 0;

}


.gkIsWrapper-gk_storefront figcaption h2 {
    color: #000;

}

.gkIsWrapper-gk_storefront figcaption h3 {
    border: medium none !important;
    color: #000000;

}

.gkIsWrapper-gk_storefront figcaption p {
    font-weight: bold;

    text-shadow: 2px 2px 2px #000000;
}

    .gkIsWrapper-gk_storefront figcaption p:after {
        border-top: medium none;

    }


.gkMenu > ul > li {
clear: none!important;
display: inline-block;
font-size: 14.5px;
font-weight: 500;
height: 17px;
line-height: 20px;
text-transform: uppercase;
width: auto;
margin-bottom: 10px;
margin-top: 9px;
}

.gkMenu > ul > li > a {
color: #eee;
display: block;
height: 17px;
line-height: 17px;
padding: 0 15px;
position: relative;
}

    #gkHeader {
        padding: 90px 0 0;
    }


    .gkIsWrapper-gk_storefront figcaption h2:before,
    .gkIsWrapper-gk_storefront figcaption h2:after {
    display: none;
    }

.gkIsWrapper-gk_storefront .activated figcaption h2,
.gkIsWrapper-gk_storefront .activated figcaption h3,
.gkIsWrapper-gk_storefront .activated figcaption p {
    text-align: left;
}

.gkIsWrapper-gk_storefront figcaption {
    left: 50%;
}

#gkHeaderNav { top: 30px }

.gkMobileMenu{
   height: 20px;
   line-height: 20px;
}

.gk-header2 h2 {
    font-size: 40px;
    font-weight: bold;
}

    #gkHeaderTop{ height: 30px }
    #gkMobileHeaderTop{ height: 30px }



.gkIsWrapper-gk_storefront .gkIsPagination { bottom: 15px !important }

.gkMenu > ul > li > a {
    color: #666666;
}

.itemBackToTop { display: none; }

.gkMobileMenu{
   height: 38px;
   line-height: 38px;
}

    #gkHeaderTop{ height: 60px }
#gkHeaderNav { top: 60px }

    .gkImageWrapperOverlay,
    .gkImageWrapperOverlayWrap:hover .gkImageWrapperOverlay > span{display: none;}
    .itemImageBlock img:hover {
    -webkit-transform: scale(1) rotateZ(0deg);
    -moz-transform: scale(1) rotateZ(0deg);
    -ms-transform: scale(1) rotateZ(0deg);
    -o-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
    }

.gkMenu > ul > li.haschild > a:after {
    color: #6d6e6e;
    content: " ";
    font-family: FontAwesome;
    font-size: 15px;
    position: absolute;
    right: 4px;
    top: 0;
}

tbody tr td {
    border-bottom: 0px solid #e5e5e5;
    padding: 10px;
}

@media only screen and (max-width: 444px) {
#gkTopMenu {
display: block !important;
max-width: 270px;
padding-top: 5px;
}

}
User avatar
Expert Boarder

GK User
Wed Feb 11, 2015 12:39 am
Sorry, but I always thought that our company selling templates and fixing found errors, not making a customizations for clients.
If you want to hire me for custom job, sure, why not.
But here I can give you only a tip how to hide selected ID in module view:
Code: Select all
@media only screen and (max-width: 420px) {
#TEST  {display:none !important}
}


~~420px it means at least iPh0ne 6 plus/Samsung Galaxy and all smaller devices in horizontal view.
User avatar
Platinum Boarder


cron