Template for each breakpoint - best way to do it?

I want to be able to control the template on each breakpoint. Hiding sections on each breakpoint does not seem intuitive or practical to me. Hiding a search box in the header for example is not really intuitive and does not adapt easily to changing the header design.

Am I missing an obvious thing here already available in Bricks ?

How do you go about making different headers for desktop, tablet and mobile ?

Thanks for any input.

1 Like

It doesn’t really matter if it feels intuitive or practical to you - it’s pretty much the way everyone does it, is the most conventional and straight-forward approach, and is why breakpoints exist.
You create a header and then hide/style elements on different breakpoints. Then you have the minimum possible number of templates and elements to edit if changes are needed.
Having 6 headers, one for each breakpoint, is a lot harder to maintain.

2 Likes

I support the idea! :+1:

Despite the generally accepted breakpoint scheme, in practice we need to make at least three different templates - for mobile devices, for tablets and for desktop.

If we use the display:none property, we get a lot of unnecessary and superfluous code, which is bad for page loading.

So here we need to develop a completely different approach for working with breakpoints with the ability to use different templates.

In practice you rarely need to make 3 completely different headers since the nav collapses and other elements can be re ordered or hidden. If your headers are actually that drastically different then just do 3 sections and show/hide depending on breakpoint.

I get that we all built sites slightly different so I guess I kinda get someone wanting this, but this is the way stuff is built whether it’s custom, wp or pretty much anything else.

Don’t mean for this to be rant but lately I see lots of stuff like this being asked for which would just turn bricks into something more like divi or elementor which nobody wants, I hope…

Here we are talking about more than just the web pages and HTML elements that are often used for them. In this case, yes, there is no need to complicate anything.

In my case, I work a lot with products. If on the desktop I can show 50 products, on the tablet they need to be reduced to 30, in the mobile version - to 10-15. I need to make completely different headers and footers. Filters need to be displayed differently, on the desktop in a sidebar, in the mobile version - in a popup. Menus need to be done completely differently, too. And so on…

You have to work with a lot of dynamic elements, not just one header. As for styles, it’s very easy to customize them with classes depending on the device. There’s no problem with that.

@manc - I hope not too… Divi/Elementor are awful. The other question I see constantly is ‘can I use the beta on live?’ It’s like asking ‘can I use this green as orange?’ - no my friend, but you could perhaps use this dictionary…

@parktechno - This is where my autism kicks in. If I can remove something I will. It’s why I like the conditions - because if you use a condition, the element is removed from the DOM. I currently have a site with 4 styles and 3 CPTs - all of which I’ve done with one header and one template It keeps maintenance simple.

But as said, we each have our own way… some like to use Beta on live and then raise angry tickets when it breaks…

Don’t even get me started on the people crying over something breaking in a beta haha. Been holding in a long ass rant for a while now but I’ll try my best not to let it out. Feel like I might actually have to create an fb account just to join the bricks fb to get some answers about more technical stuff. Bricks staff bogged down with pointless questions.

Anyways I’m going on a tangent, gonna shut up now and see how things develop

What is the point of that ? Take a break, okay ? Have a cup of coffee ? Just because things have been done in a certain way, you know …

Maybe you are doing simple brochure sites, so it does not matter, but if content and functionality is way different on an android tv, tablet, mobile, desktop, whatever … As @parktechno agrees …

But sure it can be done that way. But then perhaps just organize the structure panel or something with some tabs.

As for the other smart a comments … Well, take five would ya ?

1 Like