[Xiaobai ask for help] how to automatically select list mode on mobile devices

Hello, everyone. I am a newcomer to this site, and I have just learned programming. Now I encounter a front-end problem, so I send a post for help, hoping that there is a great god to guide me.

I found a single page template on the Internet and wanted to put it on our website. This template has two views: list view and grid view , which is the grid view by default. There is no problem with viewing on the computer side, but it is ugly to huddle together when viewing on the mobile side.

rvLYC4g.png

template link: https://bootsnipp.com/snippet.

I want to show only the list view when viewing on a mobile device, so I add the judgment code to JS as follows: 

if (screen.width <= 819) {
  
  $(document).ready(function() {
    $("-sharplist").ready(function(event){event.preventDefault();$("-sharpproducts .item").addClass("list-group-item");});
    
  }); 
}

but did not solve the problem: (

I hope the master can give me some advice. Thank you very much!

Javascript html5
Sep.02,2021

in fact, your idea is also correct, but it's just a wrong step: event.preventDefault () is to prevent the default event, originally is to prevent the default event that triggers the a tag when you click, but you don't have a here, so delete it, or else report an error

. 
if (screen.width <= 819) {
  $(document).ready(function() {
    $('-sharpproducts .item').addClass('list-group-item');
  }); 
}

maybe the problem is really too small. Haha
all I know now is that @ media query seems to solve

.

Previous: What good editor recommendations does windows have?

Next: Let me ask you a question about mysql.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu