Tooltip images jump left

Display several small images against a main product. Clicking these images swaps the main product image.
Post Reply
hipeak
Posts: 3
Joined: Mon Mar 24, 2014 3:03 pm
Location: Greater Manchester
Contact:

Tooltip images jump left

Post 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)?
norman
Site Admin
Posts: 1249
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tooltip images jump left

Post 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
Norman
hipeak
Posts: 3
Joined: Mon Mar 24, 2014 3:03 pm
Location: Greater Manchester
Contact:

Re: Tooltip images jump left

Post 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?
Last edited by hipeak on Tue Mar 25, 2014 1:16 pm, edited 1 time in total.
norman
Site Admin
Posts: 1249
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tooltip images jump left

Post by norman »

See the link above for Multiple Media Queries .
Norman
hipeak
Posts: 3
Joined: Mon Mar 24, 2014 3:03 pm
Location: Greater Manchester
Contact:

Re: Tooltip images jump left

Post by hipeak »

Brilliant. Thanks for your help.
Post Reply