Joomla Templates Club 406,261 posts

[nettemor Friend nettemorJoin date: January 2007Posts: 58Downloads:3Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#191157

Hi,
I have a dropdownmenu in my site, and these menues also have modules with images within.
Looks cool in pc version, but i think it makes the mobile version a bit messy. Menus becomes to long with the images between. So my question is, is it possible to hide these images in the mobile version ?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#508170

Hi nettemor,

Try using media jQuery to apply specific css rule for common mobile devices, here are references:

http://code-tricks.com/css-media-queries-for-common-devices/

http://webdesignerwall.com/tutorials/css3-media-queries

🙂

[nettemor Friend nettemorJoin date: January 2007Posts: 58Downloads:3Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#508203

I am sorry but i dont find your answer understandable.
Maybe because i expressed myselves wrong in my question, but my language is not english so it dont always come out how its ment to be:-)

I wil try again:
In dropdown menues it is possible to have images. In the mobile version, can i select not to display these images ?

Please advice!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#508260

Could you post your site’s URL here and tell me which image you want to hide?

Also set Optimize Css in template manager to No.

[nettemor Friend nettemorJoin date: January 2007Posts: 58Downloads:3Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#508262

site is http://www.crossfitcentrum.no.
If you hoover menu item Crossfit, Medlemsskap & tilbud, Kurs & Events, Wod and Book time you will see that all these menus have images. I want these images to be hidden in the mobile version.

Optimize css is already set to no.

Looking forward to your reply, thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#508343

Hi nettemor,

You can try to use css to hide this image in mobile layout. You can take a look again above references to know how to use media jQuery to apply specific rule.

For example, you open file: /templates/ja_template_name/css/custom.css and add this code:

@media (min-device-width : 320px) and (max-device-width : 480px) {
.span6.mega-col-module {
display: none;
}
/* YOUR STYLE GOES HERE */
}


1 user says Thank You to Saguaros for this useful post

1. nettemor

[nettemor Friend nettemorJoin date: January 2007Posts: 58Downloads:3Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#508347

Hi Saguaros,
and thanks a lot for helping me out. Unfortunately this did not hide the images. I can still see them at the mobile phone.
Do you have any other suggestions i can try ?

This is how my stylesheet looks like:

@import “../fonts/open-sans/stylesheet.css”;

@media (min-device-width : 320px) and (max-device-width : 480px) {
.span6.mega-col-module {
display: none;
}

}

[nettemor Friend nettemorJoin date: January 2007Posts: 58Downloads:3Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#508350

OMG, ever heard about refresh ? 😉
IT WORKS!!! Thank you very very much Saguaros !!!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#508378

Glad it works :laugh:

[Author]

Posts