CODEWITHSUNDEEP
htmlcssresponsive-design
Mythago
Mythago

Reputation: 961

Show one picture on tablet and different picture on pc

I have this problem...I am running page http://exploreprague.cz. In the right upper corner I have ribbon. But when I am looking on it on my tablet, its's overlapping my menu. So I figured that if there is way to show different picture(different kind of ribbon, not just differently styled) it could work. But I don't know if there is some kind of HTML/CSS/JS trick which can do it. Thanks

Upvotes: 1

Views: 698

Answers (2)

dsgriffin
dsgriffin

Reputation: 68626

One of the better ways to achieve what you want would be to use CSS3 Media queries.

In the CSS file targeted at tablet-sized resolutions, you could set display:none on that particular image, and replace it with a new image that fits in with your smaller resolution better if you prefer.

For example (iPad portrait/landscape resolution): 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  #oldImg { display:none; }
  #newImg { display:block; }
}

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10824

Here is an example of how to use a responsive css:

        Large desktop 
        @media (min-width: 1200px) {
            #largeImage{
                 display: inline;
            }
            #smallImage{
                 display: none;
            }
        }

        Portrait tablet to landscape and desktop 
        @media (min-width: 768px) and (max-width: 979px) {
            #largeImage{
                 display: none;
            }
            #smallImage{
                 display: inline;
            }
        }

        Landscape phone to portrait tablet 
        @media (max-width: 767px) {
            /* do the same as tablets or include this width range in the tablet style*/
        }

        Landscape phones and down 
        @media (max-width: 480px) {
            /* do the same as tablets or include this width range in the tablet style*/}

Just set the image display property according to the width of the screen. use 2 images one with

display: none;

and the other with:

display: inline;

and switch between them on a narrower screen

Upvotes: 1

Related Questions