Sliders working fine in desktop but not in mobile version why? - javascript

I am using UX builder theme.
Page link: [here]
In this page we used only sliders.. In mobile view slider's sections are overlapping except last slider (link).. tried everything but not getting solution.. Today I removed 2 sections from last slider (Blends of Natural Ingredients) then its coming proper in mobile version. But I need those sections.. What went wrong, where I did wrong, anyone pls..
The same issue having with blog posts.. [link]
Waiting for your valuable response..
Thank you in advance..

Related

Swup page transitions

I'm playing around with Barba.js and Swup.js transition libraries in very stripped back form.
I have the transitions working fine, but the hard-coded "is-active" class to highlight the menu buttons in the menu is now not working - I assume because of the way that Swup caches pages? The mobile version of the same page is experiencing issues as well - the hamburger and slide out menu work fine, but the links have stopped working.
I've tried adding the class="transition-fade" to each button as per the documentation, and I'm surprised that the transitions are working without being added to any buttons! Am I missing something here...?
I've created a Stackblitz here - https://stackblitz.com/edit/web-platform-geo8vq?file=index.html
Any help with getting my head around getting this working along with any best practices would be greatly appreciated!
Andy

Fix specific links in website not working on iphone only

I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here

How to fix internet explorer column widths

I'm working on a project for my school where the courses, teachers and clasroomnumbers are appearing for the signage TV's.
The start of the project was made by the company who make's our software. The only thing I can do now is change some things with javascript. These changes are working fine in Chrome and Firefox. However I need it to work in Internet Explorer.
You could go to this link to see what happens:
https://www.miras.be/lokaal_bezetting_lijst/57/2019-09-26/08:00/22:00/
When you open in Chome or Firefox it works perfectly
When you open in IE, you see that the hours are not well displayed.
--> Strange manual solutions: When I refresh the page or do something that resizes the window, it does work.
Bad view:
Good view:
Does anyone know a javascript/jquery solution for this?
Thanks in advance!
Laurent
If you want the table column width always fixed you can use
MIN-WIDTH and MAX_WIDTH on the same column. If you will you the both property with width than table column will always same.
After a long search I've found the solution. As I've mentioned, it becomes ok when I resize the window. With this event at the end of my script everything was fixed. Thanks for the answers and help!
$(window).trigger('resize')

owl.carousel responsive error in mobile view after hard refreshing site

I am working on a site which is (http://www.echo-group.com.au/), in home page right after slider there is Carousel of three inf boxes and in mobile view (developer mode) after hard refresh or viewing link in actual mobile device it shows disturbed view it suppose to show one column instead of 3 at once.
I tried to update owl.carousel JS and CSS files but error is still there i am stuck here need guidance kindly help me out it will be a big help thanks!!!
Kindly see these screenshot for further understanding the Error
ErrorScreenshot
how its need to be
In your theme.js file, in FUNCTION CALLING section, use revolutionSliderActiver() above services_carousel(). Hope this will resolve your issue.

Owl Carousel displaying different and wrong on refresh

I have an owl.carousel on my website displaying testimonials. I didn't have any issues with this until about a month or two ago. I have no idea what happened that now I have this problem but i'll try to explain as best as I can.
I'm getting two different views of the carousel on the firefox and chrome. On firefox, it looks perfectly fine and displays correctly. On chrome how ever, it seems like after the browser cashes the page, the carousel decides to align all the text to the right (I know this is confusing so ill put picture in so you guys can see). The reason I say after it cashes the page is because, when I load the page with no cashe on chrome, it looks perfectly fine as it does on firefox, but as soon as I go to another page and then come back or refresh the page, the carousel all shifts to the right.
Here is what it looks like on chrome:
https://gyazo.com/2466dc69c470851122693d622975c018 --> Chrome
Here is also a link to the website for who ever that wants to read the code them selves (scroll down the home page and you will see the testimonials section):
http://ecocertificates.com.au
Any help would be greatly appreciated guys!
Thanks in advance :)

Categories