Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
I wonder how to put this code on mobile condition / view:
catalog.blade.php
<script>
$( ".list" ).hide();
$( ".grid" ).show();
...
</script>
As you know the above code will appears on pc. On mobile I would like to show list and hide grid. How to write codes?
ref: https://developer.mozilla.org/en-US/search?q=mobile+view
@davy_yg This is inefficient. It means on mobile, where connections may be slower or the user has a limited data plan, you’re making them download a web page that contains information they’re never going to see.
Use a responsive design instead that presents the information in the most optimal way for the viewport size, instead of sending duplicate content which will also get you penalised by search engines.
The thing is the code is different on mobile and on pc. On PC I would like to content filter side by side with the product content. Whereas on mobile, the content filter and content are in a row. Therefore, I would like the list view on mobile automatically show up and I could delete the grid view.
@davy_yg You do not need to duplicate HTML just to go from a two-column layout on larger screens to a stacked layout on smaller screens. You really need to look into responsive web design.
You should not be sending unnecessary HTML to a mobile device for multiple reasons:
You can do Something like that.
$(document).ready(function() {
if($(window).width() <= 768px) {
$( ".list" ).show();
$( ".grid" ).hide();
}
});
if($(window).width() > 768px) {
$( ".list" ).show();
$( ".grid" ).hide();
}else{
$( ".list" ).hide();
$( ".grid" ).show();
}
Now, both list and grid show up on PC.
@davy_yg please learn to read console errors. I'm sure it gives an error for 768px, which should be just 768
But why not just use css to hide it as Martin suggested.. You are rendering it anyways
@davy_yg Try this
if ($(window).width() <= 767) {
$( ".list" ).show();
$( ".grid" ).hide();
}else{
$( ".list" ).hide();
$( ".grid" ).show();
}
@davy_yg Or better try using the condition with Resize event.
$(window).resize(function(){
if ($(window).width() <= 767) {
$( ".list" ).show();
$( ".grid" ).hide();
}else{
$( ".list" ).hide();
$( ".grid" ).show();
}
});
@davy_yg or just use css like the rest of us :) hehe
Please or to participate in this conversation.