Tooltip images jump left
Tooltip images jump left
We use quite large tooltip images (600px x 600px) and have a problem where these jump left, with some of the image off-screen to the left, if they hit the right hand edge of the browser window. This is a real problem with smaller resolution monitors (e.g. 1024 x 768) and tablet / smartphone browsers, where even a small or zero offset doesn't stop the images touching the right-hand edge. Is it possible to prevent larger tooltip images from doing this (i.e. allow them to gracefully clip over to the right)?
Re: Tooltip images jump left
The popup images have an ID of mpi_popimg so you may want to try adding the following to the bottom of layout Extra Image Support Styles:
The above means that pop-up images will have a maximum width of 300px on devices with a screen smaller than 1024px wide.
Tweak these numbers to suit.
More info on http://webdesignerwall.com/tutorials/css3-media-queries
Code: Select all
@media screen and (max-width: 1024px) {
#mpi_popimg {max-width:300px;}
}
Tweak these numbers to suit.
More info on http://webdesignerwall.com/tutorials/css3-media-queries
Norman
Re: Tooltip images jump left
That's great. Thanks very much. Is it possible to use multiple instances of that code to scale the tooltip images for different window sizes?
e.g.
This would probably have to be done as in-line styles controlled by BLOCK Ifs - has anyone tried anything like that?
e.g.
Code: Select all
@media screen and (max-width: 1200px) {
#mpi_popimg {max-width:500px;}
}
@media screen and (max-width: 1024px) {
#mpi_popimg {max-width:400px;}
}
@media screen and (max-width: 800px) {
#mpi_popimg {max-width:300px;}
}
Last edited by hipeak on Tue Mar 25, 2014 1:16 pm, edited 1 time in total.
Re: Tooltip images jump left
Brilliant. Thanks for your help.