Adobe Commerce 2.3 reached end of support in September 2022.

Overview of responsive web design in Magento

Responsive web design (RWD, also referred as responsive design) crafts websites to provide an optimal viewing experience across a wide range of devices (from large, high-resolution desktop computer monitors to mobile phones).

The out of the box Magento Blank and Luma themes (Luma inherits from Blank) use the mobile first RWD approach. It is ensured mostly by means of CSS and JavaScript.

The following image illustrates how the same page built on the Blank theme looks on mobile, tablet and desktop devices.

We recommend using the Blank theme, as a starting point for your customizations. That is, your custom theme should inherit from Blank.

The articles in this chapter describe the particular approaches used in the Blank theme, and provide practical recommendations on how to use these approaches in your themes:

Terms used

Term Description
Breakpoint The width of the user’s screen that causes your responsive layout to change.