Hello

It appears you have found an alternative solution to this issue by replacing the modules on smaller screen devices?

Ciarán

Hi.

I'm replacing the picture in phone-sized devices (iPhone) but still want to use the imagelinkhover modules in tablets (iPad). Unfortunately, the screen width decreases enough that the module width decreases and the right sides of the pictures get cut off in Portrait mode.

Alternatives I can think of for tablets with 768px screen width:

1. Shrink pictures to a smaller scale via CSS properties - this can be a fixed %age. I'd need to ensure the picture background is transparent or matches the style-box (and it is currently set to white for some reason).

2. Change the way that top-3 is laid out to (0,25,25,25,25,0) for that screen width only. That should leave enough space for the full picture to show.

3. If there are no other alternatives, anchor the picture on the center top instead of having it be top left-justified.

Also, is there a way to change what heading size is used on image link hover module titles for specific screen sizes? I normally use h2 but want to modify for 768px width screens to use h3.

Thank you.

Hello

Would you have a URL to an example of your ImageLinkHover module?

Ciarán

http://test.knollstech.com, home page. The issue is best seen on an iPad / tablet at 768px screen width.

Actually, I needed to change my top-3 layout to 0,25,25,25,25,0 anyway, so don't worry about solving #2 (unless it's already known, in which case I might need it another time).

I'd originally included the Title Heading text for the imagelinkhover modules in the picture, since I couldn't get a 100% reliable way to ensure it was always on two lines. At this point, I've kluged a way to fix that in the module's php file using a text substitution ("BrLn" = "<BR />" when getting the text from the form. Ugly, but it works. However, I'd still like to have more control over how the picture looks when the module's width is reduced to less than the picture width.

Thanks.

Thank you

Your third option would be your easiest , centering the images as you scale down. T do so simply add the following to the Custom CSS field of your templates parameters...

.j51imagelinkhover .j51container {

    background-position: 50% center !important;

}

Changing the heading size (h2 to h3) would not really be possible however you could simply restyle that particular h2/h3 text. In the case of the ImageLinkHover module you can add the following to the Custom CSS field of your templates parameters (edit to taste)...

@media only screen and (max-width: 1024px) {

.j51imagelinkhover h3 {

    font-size: 16px;

}}

Ciarán