Reputation: 961
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
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
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