Eliminate perfect-scrollbar functionality on mobile devices

I have applied the perfect-scrollbar class with 'height: auto' on mobile screens, expecting it to work properly. It's functioning well in responsive mode on the web. However, it does not scroll on mobile devices.

@media (max-width: 992px)
{
    .parent-class perfect-scrollbar{
        height: auto;
    }
}

Answer №1

Update your class to .perfect-scrollbar

@media (max-width: 992px)
{
    .parent-class .perfect-scrollbar{
        height: auto;
    }
}

Answer №2

Here's the CSS code you need to include:

.ps__track-y {
  width: 0px;
}

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

Incorporate text into the URL of the image

Got a URL of an image like this: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg', and looking to add 240x240 within the URL. Current Url: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg Desire ...

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...

Unsubscribing from a service method in Javascript using RxJS

After clicking a button, a function is triggered to execute. The function includes an method called "executeAction" that retrieves the current view and then passes it as a parameter to another view for future reference. async executeAction(action: ...

I encounter an error message stating "Cannot read property 'push' of undefined" when trying to add an item to a property within an interface

I have a model defined like this : export interface AddAlbumeModel { name: string; gener: string; signer: string; albumeProfile:any; albumPoster:any; tracks:TrackMode[]; } export interface TrackMode { trackNumber: number; ...

Azure deployment of a proprietary npm package

As a developer with git integration for my Angular web site, I have successfully checked code into Git and deployed it to Azure. Everything was running smoothly until I encountered an issue when trying to pull a private npm package. It dawned on me that I ...

Discover the Color's Value in Relation to a Different Color

When it comes to my CSS, I like to use .scss to make as many variables as possible. It's easy to create a variable for one color, like $primary-color. From there, I want to work with different shades of that color, which I can easily pinpoint using Ph ...

A guide on how to efficiently update and submit a reactive form with a single click of the submit button in Angular

Currently, I have a view component setup where clicking the edit button directs me to the register component for form updates using patchvalue. The issue that I am facing is that when I update and register the form using the same button, it creates anothe ...

Enroll in various Observers simultaneously using a loop in Angular

Currently, I am facing an issue in my code. The scenario is as follows: I need to iterate through an array of objects (orders) and perform some processing on each order. After that, I have to make multiple API calls for each product within the order' ...

How can I make my navbar stay fixed in place and also activate the transform scale functionality?

After fixing the position of my navbar with the class "top," I noticed that the transform property scale does not work on the div element I applied. The hover effect on the box only works when I remove the position from the navbar. This is the HTML code: ...

Remove all of the classes from the specified element using JavaScript

I have a button and I want to remove all the classes when it is clicked. Here is what I have tried: button.style.className = '' document.querySelector('button').onclick = function() { this.style.className = ''; } .myClas ...

Expand the width of the image to fill the entire screen

I have been working on trying to insert an image into my header element. However, when I test it using Live Server, the image doesn't fully fill the width of the container. Update: The dimensions of the image are 899.875 x 600. Below is my CSS and H ...

The 'subscribe' property is not available on the type '() => Observable<any>'

File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...

triangle as a backdrop

Looking for a unique design for your website background? How about a triangle split with black on one side and white on the other, like this image? I can't seem to find this online, so any help would be greatly appreciated. Is it possible to achieve t ...

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

Is there anyone who can assist in resolving this issue? I've already added the vendor.js file to Index.html

While starting up the application, I encountered this error. I attempted to resolve it by adding the vendor JavaScript in index.html view image description here ...

Encountered an issue when attempting to create a new Angular project using the

Just starting out with Angular and encountered an issue while trying to execute this command ng new my-dream-app The error message I received was: npm ERR! cb() never called! npm ERR! This is an error with npm itself. Please report this error at: npm ER ...

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

What causes the issue of observable subscription displaying incorrect data for a brief period during page refresh within a lifecycle hook?

I am facing an issue with subscribing to an observable within a component lifecycle hook. While the content is correctly displayed in the template, making changes to the DOM through a component method results in a strange behavior upon page refresh. Initia ...

Placing a div over a JavaScript element

Is it feasible to overlay a div(1) with a background image on top of another div(2) that contains JavaScript (like Google maps API v3)? I have experimented with z-index without success, and I am unable to utilize absolute positioning because I depend on t ...

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...