Recent
Categories
View Replies (7)

Responsive Problem with numbers in ImageHover Gallery

  1. Bug
0
Votes
Undo
  1. amo
    amo
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 07 August 2023
  5.  Subscribe via email
I'm having troubles with the J51 Layla ImageHover Gallery component in responsive sight.
I added information, which I wrote on different lines with <br /> at the end of each line. In regular view the information is shown as wished. But in the responsive view on mobile devices I have part of one line at the top (the part which contains only numbers) and the rest of the line is at the place it should be.It seems to have a problem with numbers.

Why?

Thank you.
References
  1. http://odas-sh.ch/organisation
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

I am not sure if I understand you correctly, do you wish numbers to wrap to a second line if required?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
amo
amo
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi, the problem is the responsive view - there the information of the telephon nr. appers above all the rest of the text...
[attachment]responsive.jpg[/attachment]

But it should look like this:
[attachment]pc.jpg[/attachment]

Thanks.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

By default,npm this information is not displayed on mobile as there is no hover function. On which browser are you having this issue? I have tested in desktop Chrome, Firefox and Safari and have been unable to replicate the above issue.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
amo
amo
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

As mentioned this problem occurs only with mobile devices, such as Ipad, Iphone (tested so far). The link to the mail works fine, but the design is wrong, since the phone number is at the wrong place (see those two printscreens I sent in my post before).

Thank you for your help.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try adding the following to the Head Custom Code field of your templates parameters (Extensions -> Template Manager -> YourTemplate -> Custom Code -> Head Custom Code)...

<meta name="format-detection" content="telephone=no">


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
amo
amo
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Good mornin Ciaran, this works so far, as the design is fine now, the telephone number appears at the right time, well the look is as in the regular view. But when I tap on the phone for getting more information, the mail application opens immediately, so there's no chance to see the information first. Is there a solution for that?
Thank you!
amo
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Amo

As there is no hover state on touch devices, the only option I can think of is to always display the information on small screen devices. To do so, To amend you can add the following to the Responsive Custom CSS fields within the General -> Responsive Options tab of your template settings. For more details on using these fields may I suggest the following article... https://joomla51.com/tutorials/template-parameters/applying-custom-css-to-a-screensize-device

.j51imagehover figcaption,

[class*=" imghvr-"] figcaption *, 

[class^="imghvr-"] figcaption * {

    opacity: 1;

    transform: none;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


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