in order to edit the Responsive Elements you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/assets/_utilities.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Responsive Element Structure
in order to create a responsive element upon Aspect Ratio first you have to create a wrapper element with class name responsive-element and inside of it you can create iframe or video or custom element with class name element-content this is the element that will fill the responsive wrapper and the responsive wrapper default size is Standard Monitor 4:3 Aspect Ratio
and you can use the wrapper only to create an image element with Dynamic CSS Background taken with attribute data-src=”image-url” and for other Aspect Ratio sizes you can use one of this class names hd-size , classic-size , cinema-size and for equal width/height use class name square-size watch the examples below and try to resize your browser to see the effect.
<!-- Responsive Element --> <div class="responsive-element"> <div class="element-content">...</div> </div>
Image Example with HD 16:9 Size Aspect Ratio.
Video Example with HD 16:9 Size Aspect Ratio.
<!-- Image Responsive Element --> <div class="responsive-element hd-size" data-src="https://via.placeholder.com/1280x720"></div> <!-- Video Responsive Element --> <div class="responsive-element hd-size"> <video controls=""> <source src="mov_bbb.mp4" type="video/mp4"> </video> </div>