Mobile Only Module Suffix

Hi,

I'm trying to hide the header module from mobile displays but the module suffix of "nomobile" isn't working. I've added this code to the override.css and enabled css overrides in template settings.

@media only screen and (min-width:768px) and (max-width:1024px) {
.notablet { display: none !Important; }
}

@media only screen and (max-width:767px) {
.nomobile { display: none !Important; }
}

@media (max-width: 640px){
.onlymobile {
display: block!important;
}
}

My site - www.cjr-photography.co.uk/jacoboliver

Hi

Header module position is using raw style which means that it's not accepting module class suffixes. Pleasesimply hide header in css with code:

Code: Select all

@media only screen and (max-width:767px) {
#gkHeaderMod {
display: none;
}
}


I'm trying to use wide photos for desktop view and portrait photos for mobile and tablet view. So is there some way for me to use module suffixes to do this without hiding the #header

Hi

Header does not support module class suffixes to not destroy layout for this position, but please publish both modules at the same time and tell me the url to page where I'll be able to see it.

Hi

You should have let me know You've answered via PM. Just saw it.

Try using a code like:

Code: Select all

#gkHeaderMod > .item-content {
display: none;
}

@media only screen and (min-width:841px) {
#gkHeaderMod > .item-content:first-child {
display: block;
}
}

@media only screen and (max-width:840px) {
#gkHeaderMod > .item-content:nth-child(2) {
display: block;
}
}