Slideshow button on homepage not linking

cytropics

Hello,
On my site, the slideshow on the hompage has buttons, the problem is these buttons are not clickable. Need some help resolving. http://prntscr.com/k9ek8b Also, here is original template http://prntscr.com/k9eku3
Secondly, how do I allow the buttons to also show on all screens including mobile?

Thanks in advance!

Ninja

cytropics
Hi
Your site has an override for this file file "/local/acm/slideshow/tmpl/style-owl.php" in template "ja_events_ii".
Kindly remove this override and check again, This file is customized and different as compare to default file.

To show the button in mobile, add this code in custom.css file

@media screen and (max-width: 480px){
.acm-slideshow .owl-carousel .item .slider-btn {
    display: block!important;
}}

Regards

cytropics

Hi,
Removing the override will mess up our seo. We had changed the <h1> title to <h2> and the <p> description to <h3>
That's the only change made to that file, there must be something else affecting it. We did a check for other larger devices like landscape tablet and it worked but not in desktop.

#2
Thanks, the mobile button work for some screens. Take a look on this mobile http://prntscr.com/k9q0g2 it is cut off.

Please assist.

Ninja

cytropics
Hi
Add this code in custom.css file to fix the button issue

.acm-slideshow .owl-carousel { z-index: 99; }

For the mobile view can you share the mobile device on which you have this issue? Because at my side its showing fine.

Regards

cytropics

Hi,
Thank you, it worked.
For the mobile view these are the devices with the issue (button does not show or cut off)
240x320
768x1024
1024x768
1024x600

Thanks in advance.

aman204

cytropics Addressing the issue being specifically seen for standard responsive screen sizes, You may add some media query css in custom.css in order to show tab to be positioned right. Majorly, H2 Item-title font-size can be changed appropriately for certain breakpoints which is pushing the tab downwards:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {.acm-slideshow .owl-carousel .item .slider-content .item-title{font-size: 23px !important;/* adjust value accordingly */}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {.acm-slideshow .owl-carousel .item .slider-content .item-title{font-size: 52px !important;margin-top: -2em !important;}}
@media only screen and (min-device-width: 1024px) {.acm-slideshow .owl-carousel .item .slider-content .item-title{margin-top: -2em !important;}}

Kindly ensure to clear your browser cache if changes dont reflect

cytropics

aman204
Thanks

paulus1031

I'll mark this resolved

Cheers
Paul