Recent
Categories
View Replies (3)

J51_Image Hover Gallery shows big Pre/Next Navigation on Iphone and IMac with Android and Windows is it fine

  1. Bug
0
Votes
Undo
  1. Sbocki
    Sbocki
  3. Commercial Templates
  4. Wednesday, 04 October 2023
  5.  Subscribe via email
Hello Cirian,
I'm using the J51_Image Hover Gallery with the Natalie J4 Template.
Today my collegue showed me our Website on his Iphone and IMac.
And there are big Pre/Next Navigationbuttons (see the the picture attached)

on my Android mobil and Windows PC is no button.


Is there any way to hide the buttons on Iphone and Mac?

Regards Stefan
Attachments (2)
Screenshot_Home on Macbook.jpg Screenshot_Home on Macbook.jpg
Screenshot_Home on Windows 10 mit Markierung.jpg Screenshot_Home on Windows 10 mit Markierung.jpg
References
  1. https://mashserver.net/entwicklung/fuerbauschheim/index.php
Responses (3)
MikePritchard
MikePritchard
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Stefan,
I didn't see this on my iPhone but can see the issue in Firefox on my PC. You might want to try this until Cirian gets back to you.
If you add this to your custom CSS either in the template or the custom.css folder in thhe CSS folder via FTP
#j51imagehover239-controls{width: 27%;white-space: nowrap;}
#j51imagehover-prev239{display: inline-block;width: 12px;}
#j51imagehover-next239{display: inline-block;width: 12px;margin-left: 21px;}

That should fix it. I don't know about the other browsers but that works in Firefox and I suspect it will work everywhere.
I hope that helps,
Mike
  1. more than a month ago
  2. Commercial Templates
  3. # 1
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 Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.j51imagehover-prev svg, 

.j51imagehover-next svg {

    max-width: 20px;

    display: flex;

}

.j51imagehover-nav {

    width: 60px;

    display: flex;

    justify-content: space-between;

    margin: 10px auto;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Sbocki
Sbocki
Accepted Answer Pending Moderation
0
Votes
Undo
Hello,

@ Mike: Thank you for the workaround. It worked fine.

@ Ciaran, thank you your CSS Code works as expected.
Regards Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


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