Page 1 of 1
Tooltip images jump left
Posted: Mon Mar 24, 2014 3:12 pm
by hipeak
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
Posted: Mon Mar 24, 2014 9:30 pm
by norman
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:
Code: Select all
@media screen and (max-width: 1024px) {
#mpi_popimg {max-width:300px;}
}
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
Re: Tooltip images jump left
Posted: Tue Mar 25, 2014 9:05 am
by hipeak
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.
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;}
}
This would probably have to be done as in-line styles controlled by BLOCK Ifs - has anyone tried anything like that?
Re: Tooltip images jump left
Posted: Tue Mar 25, 2014 10:25 am
by norman
See the link above for Multiple Media Queries .
Re: Tooltip images jump left
Posted: Tue Mar 25, 2014 6:22 pm
by hipeak
Brilliant. Thanks for your help.