Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Fusion's responsive features are designed to be fast and easy to configure, so you can use them right away. Here's how to configure your responsive Fusion based layouts!
Enabling Responsive Layouts
Once you've met the requirements for using responsive features with Fusion, enabling it is simple. Remember - you almost always want to use a Fusion sub-theme for customization.
- Navigate to Appearance > Your theme > Grid settings
- Under Enable Responsive select "Yes"
- Choose "Save Configuration"
It's that simple.
Fusion has several different layouts, and you can choose the options you want available for each one. these generally consist of where the content and sidebars will be placed, as well as whether or not that layout is available at all. You can also choose some basic grid details.
Desktop layout options
The desktop layout options, located under the Layout: Desktop tab, give you three choices: one sidebar on each side, both sidebars on the left, or both on the right. You can enable or disable the desktop layout via a checkbox underneath the sidebar layouts. By default, this layout is enabled. You can also change the default maximum grid width, and gutter size.
Tablet layout options
Tablets have two groups of options for layout - portrait, or landscape. If you look under the Layout: Tablet tab, you'll see these as two separate groups: Landscape or Portrait. Each of these can be enabled or disabled separately. Their default grid settings are also different, allowing you to optimize your theme for each mode.
Smartphone layout options
Smartphones also have their own layout options under Layout: Mobile. Mobile options are more limited, and may often drop the sidebars below the main content.
Custom Media query options
Each layout has the ability to have a special media query that is dependent on the type of layout being used. This can be changed in the 'Media query' text box at the bottom of the layout options for each layout type. For example, a tablet device using the landscape layout has a media query like this: only screen and (max-device-width: 1024px) and (orientation:landscape), only screen and (min-width:960px) and (max-width:1199px) and (min-device-width: 1100px).
