How to switch from 640px to 1000px mobile view on Warehouse theme?

Store Design
, , , , , , , , ,
1

Hi

Please can u provide a solution to replacing the 640px to 1000px view with the mobile view (attached examples below)

my store:

URL: appliancesclub.com

Theme: Warehouse

wanted result:

nickmayor_0-1683759092091.png
nickmayor_0-1683759092091.png400×333 125 KB

cheers.

2

Certainly! If you want to replace the 640px view with a 1000px view specifically for mobile devices, you can modify the sizes attribute in the image code. Here’s an updated version of the code:

{{ section.settings.image | image_url: width: 3840 | image_tag:
  loading: 'lazy',
  height: height,
  sizes: "(max-width: 640px) 1000px, 100vw",
  widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
}}

In this code, we added a media query to the sizes attribute. The (max-width: 640px) 1000px portion of the code specifies that for screens with a maximum width of 640px (which typically represents mobile devices), the image should be displayed with a width of 1000px. For screens larger than 640px, the 100vw value ensures the image takes up the full viewport width.