For anyone who might be viewing this at a later time (as I reckon the original poster has figured it out by now) this is what I think works best:
Write this in your CSS file (or create a separate CSS file targeted specifically at mobile devices)
1. @media screen and (max-device-width: 480px) {
2. @media screen and (max-device-width: 480px) and (orientation: portrait) {
3. @media screen and (max-device-width: 480px) and (orientation: landscape) {
Number 1 is targeted only at devices with a maximum width of 480 pixels, with the media type “screen”
Number 2 is equal to number 1, with the difference that it specifies the device should be in portrait mode (held vertically)
Number 3 is also equal to number one, though in this case the device should be in landscape mode (held horizontally)
Of course you can also adjust the pixels as you see fit.
Below one of these media queries you can put your style rules, like
“display: none;” for something you don’t want to show on the mobile site.
I’ll give you an example, lets say you don’t want to show an element with the ID “Picture1” you should use something similar to this syntax:
@media screen and (max-device-width: 480px){
#Picture1 {
display: none;
}
You can put this in your Style.css file for instance, and it should work.