if Mobile, then mobile.css; if not, then regular.css

I am trying to use the same webpage, but with a different CSS if the user is viewing it with a mobile device as opposed to a computer. I have the following in a CSS called mobile-choose, but it is not working...any thoughts?

/* Phone & Tablet */
@import url("mobile.css") only screen and (max-width:768px);
 
/* Desktop */
@import url("regular.css") only screen and (min-width:769px);

How to replace slideshow with static image

This question is in relation to responsive design. For anything below 480px that is viewing my site I want the slideshow replaced with a static image. I haven't got a clue how to do this though!

Would I need to add the image to the stylesheet with display: none and then for the media query tell it to display?

I'm a newbie to media queries so please be nice Smile

Duster responsive theme , things become out of whack on smaller devices.

When looking at http://www.lacrosse-lounge.com on a normal sized monitor it looks fairly well but when you view it on devices like the iPad or smaller it becomes vary ugly and not that good looking. The three widgets on the bottom instead of being displayed horizontally become stacked above one another vertically which is very unappealing. Id like for them to stay horizontal and still be nice and readable and visually appealing, but i haven't go a clue on how to do that.

Syndicate content