Interactive elements appearing on ipad even though set to display on desktop only

Can someone help me figure out why the “how long shall we remain silent section” at the bottom is rendering the elements set to display on desktop only on the ipad version anyway? i have static images replacing them for all versions other than desktop since interactions are not supported on mobile. in the designer everything renders correctly but not on the live version. i just noticed when i began working on making sure my hero section’s responsive versions after an update.

EDIT: I figured out the problem but I have no idea how to solve it. It appears the breakpoint for the ipad in landscape orientation is rendering the desktop version. And when the ipad is portrait it is rendering as I expect with the tablet version in webflow. Any ideas how to fix this?


Here is my public share link: LINK
(how to access public share link)

Hello @dapitts08,

It is all about screen width. I don’t know if there is exist other technology which recognize what type of device person using for open the site.
So iPad landscape orientation has 1024px width, which can be a small monitor width too. Sure you can add custom CSS with mediaquerry breakpoint 1024 px, but then users with small monitors will not see that elements too.

Cheers,
Anna

I have the same issue. And yeah you can do it by hand like we usually do but i find it bizarre that Webflow only shows you portrait.

Here’s a helpful link: Media Queries for Standard Devices | CSS-Tricks - CSS-Tricks

so i am following the suggestion in another thread to create symbols for the different interactive and static images that i want to display and then use custom code to show and hide them at different breakpoints based on ID. The problem is that when I give these symbols an ID it is not sticking. If I go from the designer to the dashboard the IDs disappear. Is this a bug? Thoughts? Help? I am really dumbfounded that we have to use custom hacks to get an ipad to display properly in landscape. That seems like a basic feature for a platform that claims to be pushing the web design field forward.

Edit: here is the thread that i am referring to: http://forum.webflow.com/t/responsive-breakpoint-for-ipad/10599/20

thanks! yeah i am really shocked that this is something that we have to hack to get working properly. in today’s landscape this is a basic feature needed. desktop does not equal mobile…so to treat ipad in landscape the same you do a desktop really doesn’t make any sense.

does anyone have any thoughts on my disappearing IDs issue above?

Hi @dapitts08, could you post some screenshots of the images that there is the issue with the ID’s? Which images in the design are the ID’s not saving?

Thanks in advance.

thanks. here is a video depicting the IDs for the two symbols that are not sticking.

http://cl.ly/341P0o2j3Q2m

you will see i create IDs for both symbols which appear to save but when i leave the designer and come back to the project the IDs are no longer there for both symbols.

i decided to try this method after seeing your tutorial video…my main issue is that this section contains interactive elements that i want to be static on landscape AND portrait orientation on the ipad. Right now because of the way you all have the breakpoints set up only portrait honors the static images that i created for the ipad…and landscape is picking up the desktop version…this is problematic when it comes to interactions…still really perplexed as to why you all do not have a dedicated landscape ipad mobile breakpoint…that is a basic requirement for designing responsively.

i believe i figured it out. the ID can not be applied to the symbol directly but instead needed to be applied to the wrapper inside the symbol.

Hello @dapitts08, first, I am sorry for the long delay. You are 100% correct, when using the custom code/css for the ipad in horizontal viewport, the ID should be applied to the root class in the symbol.

If there are any other questions about that, let me know, I am here to help.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.