Forum Academy Marketplace Showcase Pricing Features

Hide element in responsive mode

Hello,
I’m making an app that looks a lot like Airbnb and I’d like to be able to do the same thing they do on the accommodation page and make the map disappear in mobile mode, iPad.
airbnb view
Small example

Thanks

2 ways…

  1. Add a conditional on the element so that when the screen width is less than a specified size the element will not be visible.

  2. Add a hiding rule on the element in the responsive editor - again so that below a certain screen width the element will be hidden.

Thank you but it’s not working :expressionless:

What’s not working?

Which method are you using?

What have you got is set to currently?

I try the first 1, the hidding method.

I got this

Well something’s obviously not set up correctly.

If you want to share more info, or share a link to your editor, I’m sure myself or someone else will be able to find the issue for you.

Than you Adam, I ll try by my self to understand better otherwise I ll share with you :slight_smile:

Ok I send you a screenshot of what I wrote


I hope its helping

I’m not too sure what you’re showing me there (what it relates to on your page; the map? or parent group? etc.), but in any case…

If you’re using a hiding rule to hide an element you need to specify the parent element’s width at which the element you’re trying to hide should be hidden.

In the screenshot above (I don’t know what element it refers to, or what it’s parent element is) you’ve got it set to hide when the parent element is 104px - that’s less than a third of the width of an average mobile phone screen, which means the element wont be hidden until it’s parent element has shrunk to less than that - which may or may not be what you want but I’m guessing (from your original post, and the fact that it’s not working) that it’s not.

So you need to make sure you know the width of the parent element, and how that element behaves responsively, in order to decide when you want your chosen element to hide.

To be honest, it’s probably simpler to use a conditional on the element itself (option 1 of the 2 methods I shared in my first reply), as then you can choose not to show it based directly on the current screen width rather than the width of the parent element (which can be confusing if you don’t fully understand the responsive behaviour of the parent element).

So I’d suggest using a conditional on your map (or the group that contains it) to make it not visible below a certain page width.

In the Airbnb example you shared above, they’ve got their map set to hide when the page width is less than 1128px so you can set it to a similar number.

I’m also having issues with this. The conditional hide when screen size is < ?px makes the element invisible. However, the element still has its width and height and it’s throwing out the rest of my layout. Like Grovy, the picture has disappeared but instead, I have an empty group.

Just realised this is a year old. If anyone else runs into this issue. The solution is to click collapse when hidden.

1 Like