How can we create separate mobile and desktop features on our page?

Store Design
, ,
1

Hey guys,

Does anyone know how we can create seperate versions of a feature for mobile and desktop editions of our page? We tried to do this from Online Store > Themes > Customise and chose mobile from the top right corner, but the changes we applied for the mobile version, also changed the desktop one. More specifically, we want to change the dimensions of our header picture While on desktop it takes a normal space for such use, on mobile it gets extremely long and creates an unfriendly user experience. Any advise will be appreciated.

Thanks in advance!

2

Hey @User678 ,

Welcome to the Shopify Community!

Yes, it’s possible to create separate versions of a feature for mobile and desktop editions of your Shopify website. One way to achieve this is by using media queries in your theme’s CSS file.

Here are the steps you can follow:

  • From your Shopify admin panel, go to Online Store > Themes > Actions > Edit Code.
  • Open your theme’s CSS file. This can be found under the Assets folder and will typically be named something like theme.scss.liquid.
  • Look for the section of code that controls the header picture dimensions. It may look something like this:
.header-picture {
width: 100%;
height: 400px;
}
  • To create separate styles for mobile and desktop, you can use media queries. For example, to make the header picture smaller on mobile devices, you could add the following code:
@media (max-width: 767px) {
.header-picture {
height: 200px;
}
}

This code targets screens with a maximum width of 767 pixels (i.e. most mobile devices) and sets the height of the header picture to 200 pixels. You can adjust the values as needed to achieve the desired effect.

  • Save your changes to the CSS file and refresh your website to see the updated styles.

Note that while this method should work for most cases, some Shopify themes may have different ways of handling mobile and desktop styles. If you’re unsure, you may want to consult your theme’s documentation or contact a developer for further assistance.