How to have different page layout for phone and desktop

Store Design
1

By default I have the option to select the layout to either “Grid” or “list” view. However is there any way to have list view specifally for mobile view and grid view for the desktop edition?

My website is

www.kleren.in

2

you can use media queries in CSS to specify different page layouts for mobile and desktop devices. Media queries are a way of targeting specific screen sizes or device types in your CSS code, and they allow you to apply different styles depending on the size of the screen or the type of device that the page is being viewed on.

Here is an example of how you can use media queries to specify a different page layout for mobile and desktop devices:

/* Style for desktop devices */
@media only screen and (min-width: 768px) {
  /* Style for grid view */
  .page-layout-grid {
    /* CSS styles for grid view on desktop devices */
  }
}

/* Style for mobile devices */
@media only screen and (max-width: 767px) {
  /* Style for list view */
  .page-layout-list {
    /* CSS styles for list view on mobile devices */
  }
}

In this example, the media queries are used to target screen sizes that are greater than or equal to 768 pixels (which would be considered a desktop device), and screen sizes that are less than or equal to 767 pixels (which would be considered a mobile device). The CSS styles within each media query are applied only to the page layouts that have the corresponding class (.page-layout-grid for the desktop layout, and .page-layout-list for the mobile layout).

You can add this CSS code to your Shopify theme’s stylesheet file, and then you can use the page-layout-grid and page-layout-list classes on the appropriate elements in your HTML code to apply the styles for the grid and list layouts. This will allow you to specify different page layouts for mobile and desktop devices. You can customize the CSS styles and media query breakpoints to match your desired layout and design.

3

@kleren

can you please send store url so i will check and let you know

4

www.kleren.in