Create conditional visibility for collection items + make invisible in only mobile

Hi everyone,

I want to create conditional visibility for a form within a collection item. I want the form to not show in one specific collection item. So far this is not a problem. However, I can’t figure out how to combine this conditional visibility with also wanting to only hide the form on mobile view.
So combining display options with conditional visibility options.
Is there a way how to combine these two conditions?

Here my project.

https://preview.webflow.com/preview/pest-control-lp-93fa1ec4c5a1fbc65f2e910?utm_medium=preview_link&utm_source=designer&utm_content=pest-control-lp-93fa1ec4c5a1fbc65f2e910&preview=66be3a135c652cefe10e2e0b6aa37ec1&pageId=60ed78bed98c8127d13e3679&itemId=60ed97b9532a5dda43366ef9&workflow=preview

Thanks

Howdy @MichaelLausberg and welcome to the community! :wave:

Conditional Visibility is more of an “off or on” type of thing across all breakpoints, however it’s worth noting that this feature still technically renders the content but just hides it on the page with a display: none:

image

Are you wanting the form to display on certain collection items, but hide itself on mobile for those only? If that’s the case, you can use Conditional Visibility to hide the form on whichever items don’t need it (these will hide it across all breakpoints) and then make sure the form element’s wrapper has a combo class that will get display: none added to it for the mobile breakpoint.

Let me know if you’re looking for something more granular and I’ll see if maybe there isn’t another way around the limitation :+1:

@mikeyeven Thanks so much for your advice.
First I had a little trouble to get my head around this. But now it makes complete sense and it is really helpful to know this for the future!

Actually I thought I got it, but now I’m confused again. I managed to hide the form on Desktop view + showing it on mobile only under certain conditions regarding to collection items.

However, I would also like to know how to show the form on desktop and also show it on certain mobile, but only under certain conditions. So far the conditions then also override to desktop, However I want to only have them affect mobile view, while desktop is visible overall.
Does that make sense? Do you know any advice for this?

From what I gather, you’re wanting only certain collection items to show a form block across all breakpoints, while other items will only show it on desktop but not mobile—correct? If so, is there anything special about these specific items that will make them visible only on desktop as opposed to across all breakpoints?

I’m not too sure what the reason is behind that specific use case, so maybe a little insight about your goal with that feature would help me give some more appropriate direction. Do you have an example you can give me?

Hi mikeyvin,
the reason I’m trying to achieve this kind of conditional visibility is that we would like to test how the website performs with the form being in two different places respective to what item of the collection it is, but only regarding the mobile view. The first formposition should be at the top and the second form variant should be later on in the page. This second variant would only be applied to collection items that are about Hamburg city. There is definitely a way to just show it for these Hamburg pages with conditional visibility. But then I encounter the problem of it also applying this conditional visibility to desktop, where it should keep showing the form normally at the top for all collection items.
Does that give you a better idea?