Hi All, I’m sure this is going to be a finger problem but, I’m building my app, and it’s both mobile and desktop. I have a card with an image I’m using on the mobile version, but it’s hard to make the UI work on the desktop, so I’m just hiding it using screen size and options. My trouble is, it works when deployed, but whilst I’m building, the UI is seeing my laptop’s screen size and just using that, so the “hide on mobile” won’t work because, well, it’s not really a mobile is it Ugh, confused?, I am!!!. Can anybody offer a suggestion to make what I’m seeing replicate real-world deployment? Thanks so much, Laz
Hi @ThinhDinh, Thanks so much for the reply. I’m good with using either CSS or the screen size integrations to hide on the devices, my problem is while I’m building, if I’m looking at the mobile display that is in the editor, it won’t hide anything based on the CSS or the screen size integration because it’s not a true reading of screen size, so I have to build using guesswork and then deploy to an actual app to see if my CSS actually worked cause it wont show in the Glide editor, or am I doing it incorrectly?
Can you try the method lined out by Darren in that thread to see if it helps?
Hi @ThinhDinh, Darren’s solution works great if I use the CSS then publish to a phone to check if it worked but on the live preview in the editor, I can’t seem to make it work by changing the preview view from mobile to desktop eg, because I’m on a MacBook, i can only hide an element if the @media is less than 1920px Darrens @media works on devices when published, but I cant get them to work in the preview window in glide. If I was using a web builder like webflow I can see elements turn on and off when I select the views in the builder, I don’t seem to be able to get glide to to that but I don’t know if it’s me or Glide doesn’t have that functionally yet
The CSS works based on the detected screen width. Changing the preview view from desktop to mobile does not change your overall screen width. If you want to see the effect in the builder, you need to physically narrow your screen (browser) width to less than 640px.
Thanks @Darren_Murphy and @ThinhDinh for your help, I wasn’t sure if it was me or Glide haha, some builders do change the content in the builder so I was getting frustrated I was doing something incorrectly, All good, I think the new version of ios has a mirror function, that may work as a preview for me. Thank you again
What I do is temporarily rename the the class on affected components from mobile
to mobilex
when I am working on them. This causes them to show in the builder regardless of which preview mode I am using. Then when done, I change the class name back. I often also have the published App open in a separate browser window, which I can quickly resize to check how things look.