Crafting a Responsive Header

Embark on your journey by visiting the “Layout” option under the “Webdesign Tools” menu in your dashboard.

Engage with the kebab menu located on the layout card you wish to edit. Select either “Edit Header Section” or “Edit Footer Section” based on your modification target.

Dive into the WebCommander editor, where you can seamlessly sculpt changes within your header or footer section.

To fine-tune the responsive behaviour, opt for the “Settings” option in the editor.

Within the “Settings”, explore the “RESOLUTION” select box to access your previously defined media queries.

Choose the “Global” option for CSS rules application across the board, or select a specific media query for tailored CSS rules.

The layout editor’s toolkit also offers “SW” (Section Width) and “SH” (Section Height) options, allowing you to determine the dimensions of your header/footer. “SW” can be set to 0 for full width, and “SH” to 0 for zero height.

Adjust the width and height of your header/footer to accommodate diverse screen resolutions, achieving a harmonious responsive design.