1. knollstech
  2. Commercial Templates
  3. Tuesday, 02 September 2014
  4.  Subscribe via email
Is there a way to scale and center the picture in j51imagelinkhover modules when showing on tablets? Responsive appears to shrink the size of the overall imagelinkhover's box, causing text to adjust its format, but the picture remains its original size and is aligned left justified, causing part of it to be cut off on the right.

If resizing the picture is not possible, would it be possible to ensure that the picture is aligned on the center.

Issue can be seen when reducing width of the browser window at http://test.knollstech.com (to be taken down when site goes commercial).

Thank you.
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

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

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
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.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

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

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.