[Help] How to make this page be responsive?

Question

Hello everyone,

I found a nice product page template and I was trying to use the template on our site. There are "List View" and "Grid View" available, the page is loading as Grid View by default.

Here is the link for the template:
https://bootsnipp.com/snippets/featured/list-grid-view

It is no problem when browsing this page from desktop or laptop, but if you browsing the page from mobile device it is not responsive. Please see below picture for reference.

<img src="https://i.imgur.com/rvLYC4g.png" alt="screenshot"/>

Or https://i.imgur.com/rvLYC4g.png

I was trying to add below JS code but it won't work.

/*Code for Responsive*/
if (screen.width <= 819) {

$(document).ready(function() {
$('#list').ready(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});

});
}
/*Code for Responsive*/

can anyone help? Thank you so much inadvance.

Best,
John

Answer 1

I think that I got what you want. If you need some explanation of what I did let me know.

https://codepen.io/anon/pen/PyaYEm

Answer 2

You could use a @media query.

Answer 3

Thank you Isaac Salcedo . I am a new learner, can you sepecific?

Answer 4

Yes ,I will try to.
So, you want the page to load in list view when the screen is less or equal 819 pixels wide?

Answer 5

Later, I will post an example for you.

Answer 6

Thank you @Isaac Salcedo

I was trying to add below JS code.

if (screen.width < 819) {
$('#products .item').addClass('list-group-item');
}
else {
$('#products .item').addClass('grid-group-item');
}

but it won't work. I don't know why.

Answer 7

Thank you so much Isaac Salcedo