Streaming live at 10am (PST)

Change layout/remove elements based on media query


#1

I am putting the finishing touches on a Webflow project for www.iowatelehealthnow.org and wanting to see if there's something I can do to help make it even more seamless on mobile devices.

As of right now when you scroll down to the first section "What is Telehealth" you see a video that auto-plays in the right responsive column. However, I'm not able to stream that on mobile (must be flash-based) so if possible I'd prefer to have it removed from the mobile device views altogether and have the text to its left (and header) take up the full width of that area.

Is there a way with cascading design to remove that video and widen that text without messing with the default/desktop view?


#2

Hi @iowahospital, one thing you can try is to set the visibility of the element on different devices. Select the element and then click the Settings Gear icon and check the visible on devices settings.

I hope that helps, if not, let me know I am happy to assist further.

Cheers, Dave


#3

Hi Dave - thanks for the quick reply. The visibility setting is the first thing I tried, but the result was the same. Here's a screenshot from my iPad showing how despite the video not appearing on mobile, my text and header are still pushed off to the side within their own responsive column. Wasn't sure if it was possible to display a video on the default view but an image on the mobile view or to have the text fill out the emply space shown. Thanks!


#4

If you go the grid options on the "Tablet Portraid" click the full width button or stacked button. Not sure what it's called sorry.

http://awesomescreenshot.com/00f48t7xe2


#5

Thanks Rick! That worked beautifully!


#6