1. b8fish
  2. Commercial Templates
  3. Saturday, 15 July 2023
  4.  Subscribe via email
My image in a module in position Showcase-1a is rendered overlapping the header container.

This is also true for modules in the Top-1 position if there is no Showcase-1 module

Attached are screenshots showing the area as displayed and the area as identified by Chrome inspect

This also overlaps if sticky header is on or off

Suggestions?

See j4.bigwoodsgoods.com
--
Paul
Attachments (2)
References
  1. https://j4.bigwoodsgoods.com/
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Paul

Does disabling the General Settings -> Overlap Header if in showcase-1# module position option in your slideshow module settings give you the desired result?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
It was actually a Custom HTML module, not a SlideShow module. I did try creating a slideshow module and disabling the overlap option which did indeed drop the image below the header but still overlapped the social media icon bar. I added some empty lines into the "HTML before" field which dropped it down below the social media line. However, as a slideshow module, the pic is auto-zoomed indefinitely as it is a single image - which is not an effect I want to see on that module.

So, I went back to Custom html module and added a margin-top:5em to the image.

That is at least giving me the correct visuals for this showcase module -- j4.bigwoodsgoods.com

Other pages do not have the showcase position and do have a slideshow module with multiple slides and so the auto-zoom effect is appropriate.

However, is there a way to manage the image animation? All I see is title and caption animation controls.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello,

about the zoom-in animation effect in the layerslideshow module: I used the Nina template on this page too: https://weberhof-aschbach.de/
We disabled the animation effect by adding the following to our custom.css:

div.layerslideshow .tns-slider img {
transform: none !important;
}


Hope this helps.
Oliver
  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!