Hi! I’m trying to figure out why the white arrow icons on my buttons are not showing up on mobile. They appear when I am in Inspect mode on my desktop and browsing my site on mobile view, but they do not actually appear on my mobile phone browser. I can select them and see that they’re there, so I’m not sure if I am overlooking something in the style panel.
Any insight would be so appreciated!
Here is a screenshot of the missing arrows when looking on my phone.
Here is my site link: LINK
Hi there,
Element visibility across different device sizes can be managed through Webflow’s breakpoint settings. Here’s how to check and adjust visibility:
In the Designer, locate the breakpoint selector at the top of the screen and click through each device size (Desktop, Tablet, Mobile). For each element that should be hidden/shown, select it and check the Style panel’s Display settings. If an element is invisible, its Display property might be set to “none” for that specific breakpoint.
For more precise control, you can create combo classes to manage visibility for specific elements across different breakpoints. This allows you to maintain separate visibility states for each device size without affecting the element’s other properties.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hi Mimi,
The arrow appears on Chrome windows and on Chrome android phones, however on my iOS device it’s not visible on Safari or Chrome.
It appears to be related to the interaction’s transform, which have some known issues in Safari. Unfortunately you can’t really customize that far.
What I’d recommend instead is to disable interactions on mobile phones, and set it up so that the arrow just initially appears, with no hover-interaction. That should remove the transform on mobile devices which makes sense since there is no mouseover event.
Usually this happens when the icon’s color matches the button background on smaller breakpoints,try setting a solid contrasting color directly on the SVG or icon element in the mobile view. Also double-check any flex/grid alignment since I’ve seen arrows get pushed out of view on mobile builds.
That makes sense, thank you so much for that suggestion!!
