To access the Sparky’s template options and open the Responsive tab, do the following:
Responsive web design is considered as a good practice in modern web design. It allows your site to adopt its layout accordingly to the available space on screen. Therefore, websites have different layouts on small smartphone screens and on big desktop monitors.
In responsive web design, it’s recommended to use relative units (em, rem, vw, vh and %) because they are relative to the screen size. However, many developers still prefer to use pixels even in the responsive web design era. Which units you would use, depends of your preference. The Sparky Framework allows you to select any of these units when you are building your site.
The Sparky Framework is fully responsive! Layout you are building in the Layout tab will be displayed differently on mobile devices. Screen widths when layout is changing are known as breakpoints in responsive web design theory. The Sparky Framework uses the similar breakpoints as Bootstrap. This is an explanation how it works in practice:
The Responsive tab has just a few parameters. But, the main part of the action is actually “under the hood”, as we explained above. Let’s explain the parameters available in the Responsive tab.
Responsive Layout parameter is enabled by default. If it’s disabled, your website will not be responsive anymore and it will have the same layout, regardless of the visitor’s screen size.
Responsive Menu parameter is also enabled by default. If your menu is either of Drop-down, Mega or Horizontal type, then it will be converted to a button (also known as “hamburger” menu) on smaller screens. When visitor taps on the button, the menu will appear, but differently formatted and easier for navigation on mobile devices with touch screens.
Use Icon On Screen Width parameter allows you to set the maximum screen width when the menu is converted to a button (“hamburger” menu). If screen width is higher than value in this parameter, a normal menu output will be used.
Finally, the Menu Icon Image parameter allows you to select a file that will be used for the menu button (when it’s converted to button). All images from this folder are listed:
/templates/sparky_framework/images
To add your own image, upload the image file there using your FTP client.
Different layout on different screen sizes when Responsive options are enabled. This sample is from Plumber template. This template is available for all premium members.