Seeking general tutorial for Pro's breakpoint/responsive tools

[matthewburton]

I’m having trouble deciphering Pro’s responsive tools. I noticed that the “Hide based on screen width” section in the Inspector appears for some objects, but not for others. Which Pro elements can be made to disappear at certain screensize breakpoints? What conditions must be true in order for me to use this feature?

[Prasant]

Hello @matthewburton,

Thanks for asking.

Well, Hide During Breakpoints covers most of the view ports. In case you are targeting a specific view port then you can take advantage of CSS media queries. While making a the changes, I suggest you to assign a custom CSS class to the relevant section or element under Customize https://cl.ly/2A1s2H0Q023f. I am sharing few resources that you can take a look to get started with Media Queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Using media queries

However I see that you are referring as “Hide based on screen width” which indicates that you are using old version of Pro Theme. To confirm I checked the URL you have assigned on Pro licence and can see that you are using Pro version 1.2.7. I suggest you to please update Pro theme to the latest release 2.0.4 which comes with some really cool features and function. Top of the list is introduction of Design Cloud. I am sharing relevant links that you can refer.

1. Changelog: https://theme.co/changelog/#theme-pro-2-0-0
2. Design Cloud: https://theme.co/apex/forum/t/meet-design-cloud/24941
3. Template Manager: https://theme.co/apex/forum/t/template-manager/20364
4. Theme and Plugin Update guide: https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62

Thanks.