PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Create a responsive mobile theme based on a default theme

What’s in this topic

The topic describes how to create a responsive mobile-specific theme using the default Magento approaches.

Creating a mobile-specific theme

To use all the responsive approaches implemented in the Magento out-of-the-box Blank and Luma themes, your theme should declare one of them as a parent.

To create a mobile-specific theme:

  1. Create a theme as described in Create a theme, having specified Blank or Luma as a parent theme.
  2. Add a <theme_dir>/Magento_Theme/layout/default_head_blocks.xml layout file with the following content:
1
2
3
4
5
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-l.css" />
    </head>
</page>

The <remove> instruction removes the desktop-specific files from your theme.

Applying mobile-specific styles

Use styles-m.less to generate mobile-specific styles.

1
2
3
4
5
6
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <remove src="css/styles-l.css" />
    <css src="css/styles-m.css" />
  </head>
</page>

Media queries @media-common, max screen__m, max screen__s, max @screen__xs and max @screen__xxs will be added to styles-m.css.

Example of a LESS mixin to target screen width less than 480px:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
    // your code
}

Example of a LESS mixin to target screen width less than 768px:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    // your code
}

CSS in Magento responsive design