[Resolved] Element Widget Queries help required. HTML.spin not contained within widget.

[Mark]

Hi guys,

We are just trying to solve this little puzzle. We are adding 360 spins to the site through Elementor and their HTML widget. The problem we are having is that the HTML.spins are not remaining contained within the widget container on mobile devices (see link below and view on mobile if possible or a screen sim).
https://gravity360.co.uk/spin-options/

On mobile devices, we need to get the html.spin to snap to the widget container size somehow. As you can see above, currently between 50-75% of the image is missing. Could this be done with an element widget query? From what I understand a typical @media query wouldn’t work in this case.

On desktop it would also be nice to be able to determine how the height the html.spin and background displays on different desktop screen resolutions so we are able to show content beneath the html.spin (like on the landing page for example where we wish to see 20% of the top of the thumbnails beneath the Landing Page Spin. https://gravity360.co.uk

On mobile and desktop homepage’s, could we somehow determine the height of the spin background as a fixed percentage of the screen height being used?

I have been looking around and I feel like this can be achieved with ‘Element Queries’ as opposed to ‘Media Queries’, because we are trying to control what happens within the widget container itself.

Is anyone able to help point us in the right direction here and also let us know where to put the queries ie in the header or in the html widget itself – that would be amazing.

Thanks in advance for any help you can give us. Mark

[David]

Hi there,

those 360 spin elements are not loading for me, i am seeing multiple errors in the console which are related.

Element Queries ( and Container Queries ) are not supported in current browsers. They would require JS libraries to be imported and not something we could advise on here.

Media Queries allow you to do the same thing though, by targeting a CSS class, ID or element tag at the defined screen width. Elementor of course provides this function built in but only allows you to target the container elements not the content that your HTML is outputing.

Considering that the object output by your HTML is breaking out of the container, i would hazzard a guess that it itself is not behaving responsively. Maybe the author of that code could assist with that?

The other option is to look at using embed or iFrames to output the content.

[Mark]

Thanks guys! Mark

[David]

You’re welcome

[Author]

Posts