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

[image] Trying to build a desktop version Ask for Help Assuming that you are on a paid plan, you can use CSS for this. This is what I use: @media only screen and (min-width: 640px) { .mobile { display: none; } } @media only screen and (max-width: 640px) { .desktop { display: none; } } When using the above, it’s a good idea to group your components in containers, and then apply the CSS class to the container, rather than individual components. I’m guessing that you are either not using containers, or not using them properly. Anyway, the ans…

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 :smile:

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 :slight_smile:

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.

[image] Darren_Murphy: I often also have the published App open in a separate browser window, which I can quickly resize to check how things look. :backhand_index_pointing_up::backhand_index_pointing_up::backhand_index_pointing_up:

Responsive Builder Problem

Ask for Help

ThinhDinh February 28, 2025, 12:53am 2

Topic		Replies	Views
Trying to build a desktop version Ask for Help	4	124	February 15, 2025
Responsive desktop view or mobile view Ask for Help	1	355	July 21, 2023
Separate Layouts for Mobile and Desktop Feature Requests	14	659	October 5, 2024
Can you hide components or screens based screen size? Ask for Help	2	539	March 23, 2023
CSS for hiding stuff! Community Resources tutorial	89	9157	March 6, 2024

Responsive Builder Problem

Related topics