I’ve finished coding a client site and am now working on the tablet and mobile responsive versions. On the desktop version, I have a background video element (which is set to be visible on desktop only), and a regular slider slideshow on tablet downwards (which is set to not be visible on desktop).
However, when I view the site on a tablet, the video is still playing — both in browser responsive development modes and physically on a tablet (iPad Mini and iPad Pro).
I also set the visibility to None for each (video for tablet, slideshow for desktop) to be sure and override the default Webflow behaviour, but bizarrely that also isn’t working!
When I go to Tablet view in Webflow, the video disappears and the slideshow appears, exactly as I would expect. But in published mode, this is very much not the case.
Hi @energidesign, @micahryanhtml is correct that the video shows on ipad horizontal view as that is considered to be desktop viewport in Webflow (992px) as the ipad horizontal is 1024px wide.
One thing you can try is to use a little custom css media query to manually set the background video to display none when the viewport hits 1024 px or below.
In the code above, #bgvideo would be the ID given to the bg video element in the settings panel.
The code should go in the head of the site in Custom Code from the Custom Code tab of Project settings or the Head section of Custom code in page settings.
After giving your Background video an ID that matches one used in the custom code, and pasting the custom code into the head of the site, then republish and check if the bgvideo still shows on ipad horizontal view.
Thanks for the feedback, and the suggestion of a media query override, which is a good idea. However, the issue(s) I am seeing are site-wide, as in any of the responsive adjustments I have made (margins, font sizing, flex boxes, etc) are being ignored.
For instance, on the home page, the left margin to the logo and text is 100px, and on iPad I have set it to 40px. But that edit is also being ignored, etc.
Are you able to suggest what to do here? All the edits I am making in Webflow aren’t making it into the real world, which is a first in my sites so far. Is there something which is perhaps affecting this which I am unaware of?
Hi @energidesign, since ipad horizontal will always use the desktop view styles and the ipad portrait orientation always uses mobile tablet, one good approach I like to use is to keep the same styling for both desktop and tablet, using % based widths and responsive styling for Desktop and Tablet, then change up the styles for mobile landscape and mobile portrait as needed.
This way your site will render the same on ipad horizontal or ipad tablet, as the styling for desktop and tablet are exactly the same.
In your example of the left margin on the logo and text set to 100 px on desktop and 40 px on tablet view, you can still achieve this using css media queries, but you would have to add custom media queries for every style that needs a manual adjustment, such as the logo style or text style.
If you style your Desktop and Tablet views the same, with maybe the exception of the BGVIDEO still using a css media query to not show below 1024px, you can at least limit the number of style exceptions needing css media queries.
Sure thing, if you would like me to take a look at anything, let me know, I know it can sometimes be tricky to find the right balance for ipads.
Rule of thumbs I like to use when dealing with ipad are use % based width, make sure everything is 100% within the body element, and use flexbox to let your content flow responsively from Desktop to Tablet (this might require adjusting the layout a bit more on Tablet view, or depending on how the Desktop styles are made, it might not need any changes, or very few (that’s the target, to have elements resize naturally and responsively from Desktop to tablet)
There’s another issue regarding the responsiveness which I’d love for you to take a look at.
On the same site, if you go to the Desktop version and click Portfolio in the nav, you get to the thumbnails with a nice rollover interaction.
On tablet and lower, I want the interaction to be disabled, returning the overlay graphics to their default state (the state I see in the Designer, where they’re visible), so on the Mouse Hover interaction for those thumbnails, I have set it to trigger only on Desktop…
But when I view the site inside the WF Preview, the thumbnail graphics are still hidden…
Ah I see that it says the interaction’s Initial State actions will be shown on iPad, etc. This is backwards to me, because I would expect if I tell an interaction not to work on tablet and lower, it would simply show the graphics in their original designer format, and not the initial state which is defined in the interaction, because those initial states hide and move the graphics in the first place.
I’d love your thoughts and/or suggestions on this issue. It’s the centrepiece of the website and the default state of the thumbnails with the overlay text is really nice, and obviously needs to be there on iPad etc in its default state…
When replying to forum posts via email, it is recommended that you omit/remove your email signature, as it adds unnecessary information to your post (plus it exposes private information publicly).
