Responsive design is one of the necessities of the world wide web these days and being able to view the website on all sort of devices curated for the device is a big challenge. The X and Pro themes are responsive out of the box, that means the auto-generated codes and styles will sit beautifully on mobile, tablet, laptop and desktop devices.
Having said that, there is also Cornerstone in X and Pro Content, Header and Footer builders in Pro which give many options and elements to add content. The content you may add to the website might not necessarily be suitable for all kind of devices and that may cause rendering or aesthetic issues.
##Hide During Breakpoint Option
The Cornerstone, Pro Content, Header and Footer builders have an option to Hide/Show different sections of the content based on the screen size of the viewer device. The option creates an opportunity to hide the sections which don’t fit on mobile devices or don’t have a good view on big screens.
##How to Use the Hide During Breakpoint Option
###Cornerstone / Pro Content Builder
- Go to the Layout tab of the builder and click on the magnifying glass icon of a section which you want to hide in a specific screen size:
- Click on the Customize tab of the section:
- Scroll down to find the options to hide the section based on screen size:
- Click on the view which you want to hide the section and then save the page.
The same functionality is available for the V2 elements individually. For example, you can hide the Text Element by following steps above but this time inside the Text Element options:
###Header/Footer Builder
- Go to the Header/Footer Builder Layout tab and click on the magnifying glass icon of the Bar which you want to hide/show based on the screen size of the device:
- Click on the Customize tab of the Bar options:
- Use the Hide During Breakpoint option to Hide/Show the bar based on the screen size:
The above functionality is also available for Containers and Elements of the Pro Header and Footer Builders.
##Alternative Sections Using the Hide/Show Option
Now that you know how to Hide/Show a section based on the screen size, you can have 2 versions of a section curated for a specific screen size and set them to show only for the sizes which you intended the section to show.
##Pro Header Example
A good example to show the usage of this functionality is when you want to use the Header Builder of the Pro theme. You can have two separate containers for the desktop and mobile view:
The first container will have the Navigation Inline element which is perfect for the desktop view but not good for the mobile:
The second container will contain the Navigation Collapsed which is suitable for mobile devices:
Using the Hide During Breakpoints option you can show the first container on big screens:
and the second one on small ones:
For more information on the header and footer builders of the Pro theme click here.