How to use section column's "hide on this breakpoint" setting.

Developer Support CMS Development
1

Hi there, I’m building a simple landing page with a section that contains two columns. I noticed for the first time that there is a setting for the columns, under Visibility, that states “hide on this breakpoint” with a show/hide choice.

My question is how do I change my breakpoint so that I can tell this column to be hidden at a mobile breakpoint?

Screenshot 2023-08-23 at 12.31.47.png
Screenshot 2023-08-23 at 12.31.47.png732×494 36.6 KB

2

Hi, @MattOnce :waving_hand: Thanks for your question.

This feature is a bit binary. Meaning there are only two options to toggle. Additionally, there is not an option to use this feature and customize the specific viewpoint this is triggered at.

My instinct is it’s set using a standard for mobile vs desktop, as that would cover most-but-not-all use cases. And it is not specifically called out in the documentation.

Here’s what I found in the documentation — Edit content in the content editor – To hide an element.

  • In the Hide on this breakpoint section, click Hide. By default, this will hide the module on desktop and mobile views.
  • To show the module on mobile or desktop only, click the mobile or desktop icon at the top of the page. Click to expand the Visibility section. In the Hide on this breakpoint section, click Show. This will show the module on the selected device type, but hide it otherwise.

CleanShot 2023-08-24 at 13.05.55.jpg
CleanShot 2023-08-24 at 13.05.55.jpg962×780 121 KB

Have fun building! — Jaycee

3

Hi Jaycee, thanks for the response!

I imagined there would be a toggle to switch between desktop and mobile view (as in your attached image) but I do not see that on my side. am I in the wrong place/view?

Screenshot 2023-08-25 at 09.50.08.png
Screenshot 2023-08-25 at 09.50.08.png689×155 11.1 KB

4

Hey MattOnce,

We ran into this same issue, if you’re not seeing it, it’s because you don’t have Pro or Enterprise from what I can tell.

Our clients who are on starter are not able to do this, our clients who are on Pro can.

5

Thanks for this insight! It has to be the answer. I guess the toggle still being visible is just a bug that they’ll eventually patch out.

6

This is set in your theme’s theme.json file. See this for details:

7

Thank you! It might be the case that this module was never given additional breakopints.

8

At this time, you can’t set multiple breakpoints. There is simply desktop and mobile and the theme value noted above specifies two things:
1) At what screen size do you want mobile styling from this feature to kick in.
2) At what screen size do you want to see a mobile preview inside of the editor.
Hopefully additional breakpoint options come in the future!