Webpage created from scratch encounters technical difficulties on mobile device browser

My website seems to be getting stuck at the beginning of a section, particularly on mobile browsers. You can check out the website here

<section class="home-slider owl-carousel">
  <div class="slider-item" style="background-image: url(images/bg_1.jpg);">

    <div class="container-fluid">
      <div class="row slider-text align-items-center" >

        <div class="col-md-5 wrap col-sm-12 ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
          <h1 class="mb-4 mt-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Simplify School Affairs with Vicasin Techies</h1>
          <p class="mb-4 mb-md-5 sub-p" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Digitalize your school with Daksha - Simple, Secure, and Reliable</p>
          
        </div>
        <div class="col-md-7 ftco-animate">
            <img src="images/dashboard_full_1.png" class="img-fluid" alt="">
        </div>

      </div>
    </div>
  </div>


</section>
javascriptcsshtmlbootstrap-4owl-carousel

Answer №1

While browsing your website on Chrome 70 for Android, I noticed a problem with scrolling when using touch on the carousel. You can replicate this issue by placing your finger on the chat icon and attempting to scroll down.

It seems that the issue lies in the following code:

.owl-carousel.owl-drag .owl-item {touch-action: none;}

To resolve this, update the code to:

touch-action: auto;

This change will enable scrolling functionality, but it will also allow users to zoom. If you wish to disable multi-finger zooming, you can modify the code to:

touch-action: pan-y;

Answer №2

After updating to the newer version of owl_carousel, I successfully resolved the issue. If you are currently using an older version, I recommend upgrading to the latest version. The latest version includes the changes recommended by @Chris Elioglou.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the file that has been uploaded to AWS S3

Here is a snippet of code to consider : var express = require('express'), aws = require('aws-sdk'), bodyParser = require('body-parser'), multer = require('multer'), multerS3 = req ...

javascriptnode.jsamazon-web-servicesamazon-s3

Generate Sub Menu for Navigation Bar based on Main Menu Selection

I'm currently working on dynamically setting menu items and sub menu items using React Props. My code successfully iterates through the main list items navItems.label and displays them. However, I'm facing an issue with displaying the sub menu i ...

javascriptarraysreactjs

Updating the error state of a TextField Component in React MaterialUI upon clicking a button

After clicking a 'search' button, I want to validate input fields in my input form. Many solutions suggest validating the input live as it is entered, but I prefer not to do this because some of the validation processes are costly operations, su ...

javascriptreactjsvalidationmaterial-ui

The ElementNotInteractableException was thrown because the element could not be accessed via the keyboard when trying to input text into the FirstName field on Facebook

The issue is as follows: Exception encountered in thread "main" org.openqa.selenium.ElementNotInteractableException: Element is not accessible via keyboard Here is the code snippet: System.setProperty("webdriver.gecko.driver"," ...

javascriptfacebookselenium-webdriverwebdriver

Is there a way to identify which specific item in a watched array has been altered in VueJS?

Imagine having an array declared in the data section like this: data() { return { myData : [{foo:2, bar:3},{foo:4,bar:5}] } } If you want to identify when the bar property of the second element changes, what should your watch function look li ...

javascriptvue.jsfrontend

Having trouble with Vue 3 Composition API's Provide/Inject feature in Single File Components?

I am currently developing a VueJS 3 library using the Composition API. I have implemented Provide/Inject as outlined in the documentation. However, I am encountering an issue where the property in the child component remains undefined, leading to the follo ...

javascriptvue.jsvue-componentvuejs3vue-composition-api

Is there a way to include e.preventDefault() within an ajax call?

After the user clicks the submit button on my form, the handleSubmit function is triggered. However, I am having trouble calling e.preventDefault() inside my AJAX call due to its asynchronous nature. How can this issue be resolved? class FormRegister ex ...

javascriptajaxreactjs

The GAS web application is experiencing issues with sorting dates correctly on the Javascript table

I have a food consumption log in a table that I need to sort. When I attempt to sort by the date column, I notice an issue with how it groups numbers together. For example, the sorting places all dates starting with 10 between 1 and 2, then all dates star ...

javascriptjquerygoogle-apps-scriptbootstrap-4web-applications

Dynamic class/interface in Typescript (using Angular)

Is there a way to achieve intellisense for an object created with a dynamic class by passing parameters? Here is the code snippet: Main: let ita: any = new DynamicClass('ITA'); let deu: any = new DynamicClass('DEU'); The DynamicClass ...

javascriptangulartypescript

Carousel Pagination: Using Titles Instead of Numbers

I am currently working on implementing a carousel pagination using the Caroufredsel plugin. I am looking to create unique custom Titles for each slide in the pagination, rather than using default numbers. My goal is to have completely different Titles fo ...

javascriptpaginationcarouselcaroufredsel

Footer that sticks in a vuejs application

I am facing a challenge in implementing a sticky footer in my vuejs application. Vuejs and similar frameworks require the presence of a root element in the template. This requirement is causing complications when trying to use Flex to create a sticky foo ...

htmlcssvue.jsflexbox

Assigning null values, or initializing values in AngularJS

How can I clear input values to null after clicking on a button? Empty fields: https://i.sstatic.net/JDTZA.jpg Fields with existing values that I want to reset back to empty fields. https://i.sstatic.net/T5iKc.jpg HTML: <label class="item item ...

javascriptangularjsinputionic-framework

Custom CSS styles for purchasing stocks using percentages

Can someone assist me in fixing the CSS for this custom card within a modal box? <!--Card--> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <input type="text" id="market-searc ...

htmlcssbootstrap-4

Guide to setting a default child route in react-router and updating the URL as needed

Currently, I am utilizing react-router v3 and have a segment of my routing code as follows: ... <Route path='dashboard' component={Dashboard}> <Route path='overview' component={Overview}/> <Route path='scan&apo ...

javascriptreactjsreact-router

Ways to have a function return a promise from the final "then" in a series of promises

I am delving into the world of test automation with Selenium and JavaScript. As a newcomer to both, along with functional programming and promises, I am facing a challenge in creating a function that performs three essential tasks: Click on an input Clea ...

javascriptseleniumreturnpromise

Pass information from JavaScript to PHP without using a form

I am trying to pass data from JavaScript to PHP without using an HTML form. The scenario involves the user clicking on a specific HTML div, sending its ID to a JavaScript file, and then transferring it back to a PHP file. How can I achieve this? Below is ...

javascriptphphtmlajax

Discover the following `<td>` identifier through the act of clicking on a separate `<td>` element

I have a few td's with specific ids: <td id="first">first</td> <td id="second">second</td> <td id="third">third</td> <td id="fourth">fourth</td> Whenever I click on one of the td elements, I want to re ...

javascriptjqueryhtml-table

Having trouble locating the module '.outputserver ode_modulespiniadistpinia' in Nuxt3 and Pinia?

I recently integrated Pinia into my Nuxt3 project, and while everything works fine in development mode, I encountered an error when trying to access the application in production mode resulting in the website freezing. [h3] [unhandled] H3Error: Cannot find ...

javascriptnode.jsvue.jsnuxtjs3pinia

The importance of context visibility for functions in JavaScript within a React.js environment

Why is it that the react state is visible in the function handleFinishChange, but cannot be seen in validationFinishTime? Both are passed to the component InputFieldForm. When executing this code, an error of Uncaught TypeError: Cannot read property ' ...

javascriptreactjs

I'm having trouble retrieving a list of elements from a Python class in order to showcase them in an HTML file

I've written a snippet of code in my views.py file where I defined a class called Pizza. from django.shortcuts import render from .models import Pizza def index(request): pizzas = Pizza.objects.all() return render(request, 'menu/index. ...

htmldjangodjango-viewsdjango-templatespycharm