Responsive classes are being added in to sections but I didn't use "Hide based on screen width"

Support
#1

Hi there – I have a number of sites (on a multisite install) with a weird issue.

The classes to hide sections (x-hide-md x-hide-sm x-hide-xs) are being added in to a section even though there no selections made in the “Hide based on screen width” option in the backend. If I select all of the screen width, then deselect them and save, it saves correctly and those classes are gone on the frontend.

Any idea why this is happening, and how I can automate the process of removing these mysterious classes?

Things to know:

  • Pro / Cornerstone is up to date
  • These are “classic” sections, for what that’s worth.
  • These sites are clones of each other, so I may have replicated the issue unknowingly, but it seems to have just come up.

Thanks!

#2

Hello @aaronschmidt,

Thanks for writing in! It is best that provide us a URL of the page so we can check on the element structure. If you were using the X shortcodes, the early days of the theme, most likely some of the elements were not rendered correctly with the latest version of the theme.

You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#3

Excellent, thanks! Secure note added.

#4

Thank you for the info.

We can’t access the site because of WordFence.

Your access to this site has been limited by the site owner

Please disable the plugin temporarily or deactivate country restrictions. We will recheck the site once this has been taken care of.

Best regards,
Ismael

#5

Oh, sorry about that. Any chance you can share an IP address / range I can whitelist?

#6

Hey @aaronschmidt,

We are working on different places and can’t give you the static IP address. That said, it would be best to disable the restriction while we check your issue.

Thank you.

#7

Makes sense. I deactivated. Thanks!

#8

Hello @aaronschmidt,

I checked your site on my end and it seems that the mentioned class styles are working fine on my end. I would suggest you please purge all the browser cache and recheck it. I have tested it on the Google Chrome browser version 132.0.6834.111

Thanks

#9

Hmm, let me clarify the problem.

The “Page title” section on the page I listed in the secure note is being hidden on small viewports. (Confirmed on multiple browsers). If you go in the backend, you’ll see that none of the screen sizes are selected for “hide based on screen width.”

Are you seeing this too?

If I select viewports, and then deselect and then save, it saves correctly.

Thanks for looking again!

#10

Hello @aaronschmidt,

I checked the backend, and it seems it is working fine on my as well. Please have a look at the given screen recording in the secure note.

Thanks

#11

Ah, I see I’m not communicating this yet. A screenshot will help! You will see that nothing is set to be hidden in the inspector but the page title is still being hidden. Does this help?

Screenshot 2025-01-24 at 10.59.25
Screenshot 2025-01-24 at 10.59.251292×1610 245 KB

#12

Hello @aaronschmidt,

I checked your settings, and you have used the component for the page title, it seems that you might have added any JS to add the classes. I went ahead and added a section for the page title, which is working fine now I have kept it in hidden mode using the breakpoints. You can unhide and check the settings.

Hope it helps
Thanks

#13

Thanks for looking again and trying to find a solution.

I did not add any JS to add those classes in. Can you think of any other reason the classes would be there even though I did not select any in the “hide based on screen width?”

Since I have many pages with this problem, I would prefer a solution where I can make the sections behave normally and not have to create new sections for each page (or, like I mentioned above, select all of the breakpoints and then deselect them).

Any ideas about that?

#14

Hello @aaronschmidt,

I tried to access your site dashboard but I am not able to access your site dashboard due to IP restrictions. Please disable the IP restriction and share the super admin login details so we can debug it on our end.

Thanks

#15

Sorry about that. Had to enable that for a minute.

I have disabled and also updated your privileges. Thanks!!

#16

Bumping this because I would like to reenable Wordfence. :slight_smile: Thanks.

#17

Hello Aaron,

Which Pro version is it when you found the issue? I just check the given page and I could not find it.

image
image581×511 17.6 KB

Perhaps the updates may have fixed the issue. By the way, another update release has just been rolled out. You can update to Pro 6.5.16 now.

Cheers,.

#18

I was on 6.5.15 and am now on 6.5.16. The problem is still there.

Look at the page I’m sending in the secure note. The first section on the page has the classes to hide sections, but I have not selected any to be hidden. No matter what I do, this section will not display on small viewports.

Why/how are those classes being added in?

Thanks!

#19

Hello @aaronschmidt,

Thanks for writing in!

I have checked your page and the issue is coming from the component.
image

Please edit this component and check the “Hide During Break Points” option. You can enable the breakout mode and make sure to remove any selection on this field.
https://www.youtube.com/watch?v=ZWEiV7brtJk

image

We highly recommend that when creating new components or new pages, please use the new elements and refrain from using the classic elements.

Best Regards.

#20

Hi. I don’t understand.

I’m inspecting the component at cornerstone/edit/8206 and none of the “Hide based on screen widths” are selected at any level (section, row, column, element). Yet, the page title is still being hidden responsively.

Would you please explain further?