Responsive Custom Post Layout

Is there a shortcode or a way to determine what breakpoint is active when working in HTML or a custom post layout?

Perhaps something like
[wpbb-if fl-page-breakpoint="medium"] show this [/wpbb-if]

Hey @kerkness ! Did you ever get this sorted out? I’m wanting to completely change the post layout to just show 1 post in a horizontal layout out as opposed to a card layout. 3 columns with the featured image in the left column, the excerpt in the middle them some (possibly custom field) info in the right column.

I’m just not sure how to do that and have it be responsive.

I did not unfortunately.

Responsive breakpoints are CSS and Javascript. Your browser decides what CSS to use based on media queries. PHP has no idea what breakpoint your browser is using.

Beaver Builder does provide some features around break points at least to hide or show specific content using the visibility settings. So my original question was based on this being accessible via short-code so you could cleanly implement inside a custom post template.

Obviously you can roll a solution using pure css and/or js but the question was if there was a shortcode to implement the css/js for you.

Yes it does and the content is hidden via CSS and Javascript. Shortcodes are parsed by WordPress using PHP. PHP runs on the webserver and has no idea at all what size device the client is using. JS/CSS runs clientside on the device.

Yes. I have been developing PHP since the 90s so very aware of what it does and does not do.

While a shortcode is parsed in PHP on the server, it is entirely possible for the output to be HTML, CSS and Javascript.

Yes but your example requires PHP to know the current breakpoint, and thats impossible.
[wpbb-if fl-page-breakpoint="medium"] show this [/wpbb-if]

You could add whatever your code is into a HTML module then set the visibility of the module or the row its in to have visibility or not.