Search for Hide based on screen width

[aaron_softwarepromotions]

Hello,

I recently noticed that a button was missing from a page on our website. After digging into the settings, I noticed that someone inadvertently clicked on one of the “Hide based on screen width” options.

I have a tool that can scan my entire website’s code but what can I search for in the code that would signify that a button or element has been hidden?

I want to make sure that there are no other items that have been set to hidden when they shouldn’t be hidden.

Thanks

Aaron

[prakash_s]

Hello, @aaron_softwarepromotions,

Thanks for writing to us.

It seems that you might have set the section or any element hidden by using Breakpoints. To check it, you need to go to Cornerstone page builder —>Click on the Magnifier icon to inspect it —>Customize–>Hide During Breakpoints

In case if you have not seen our breakpoints doc please have a look at it

Hide or Show Content by Device Size | Themeco Docs

Hope it helps
Thanks

[aaron_softwarepromotions]

Sorry, I should have made this more clear.

I know how it gets added to a page. Just as you outlined in your screenshots.

What I wanted to know is how this looks in the code of the page so that I can scan all pages to find which page uses this feature?

Basically, I need to know what to search for when I view the source code of the page.

[ruenel]

Hey @aaron_softwarepromotions,

Please do the following:
1.) Go to the Layouts tab to view the skeleton structure of the elements on the page.

2.) Find the button element and take notice of the number next to the right side of the button element.

3.) Hover over the button element to find out what the number consists of, and you will find the “Hide During Breakpoints” option is applied to the button element.

Hope this makes sense.

[aaron_softwarepromotions]

Let’s try this again. I must not be explaining myself.

If I do a “view source” in the browser of some page on my website, what is the CSS class that causes this hiding feature?

I want to scan my site and look for occurrences of that CSS class to see if there are any other parts of my site that have been inadvertently hidden.

Does that make sense?

[nabeel]

Hey Aaron,

Thank you for the explanation, in the source code you should be looking for the following classes x-hide-lg x-hide-md x-hide-sm x-hide-xl x-hide-xs. In one of the section in my test environment, I made it hidden for all device sizes for a reference (see screenshot)

Hope this helps!

[aaron_softwarepromotions]

Thank you.

[prakash_s]

Hello @aaron_softwarepromotions,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks