How to delete extra spacingi n units

[Bhavyatafoundation]

Hello!! We are currently trying to integrate H5P content along with normal texts/media files into our unit/activity pages which is ultimately integrated into a single course. Each unit at least consists of 1-2 H5P content. For now, the unit is not connected with media attachments or assignments. But soon it will be done. For so, the current user interface is filled with huge white spaces, between each content body. Causing it to look pretty unprofessional work. How can we rectify this issue? Below is the code of the sample page for page structure reference:

<img class="size-full wp-image-14500 aligncenter" src="http://learn.bhavyata.com/wp-content/uploads/2021/11/minimalist-image-of-monk-wearing-peach-colored-rob-2021-09-03-04-29-55-utc-1-460x109.jpg" alt="" width="100%" height="100%" />
<div>
<div class="vibe_editor_shortcode">
<h3>Prayer</h3>
</div>
<div class="vibe_editor_shortcode">
<div class="vibebp_accordion_wrapper">
<div class="vibebp_accordion_toggle">

<input id="accordion_Afn5MENOyACWean_0" checked="checked" name="accordion_Afn5MENOyACWean" type="radio" /><label style="font-size: 17px; font-weight: 500; color: #000;" for="accordion_Afn5MENOyACWean_0">Overview</label>
<div class="vibe_editor_column_content vibebp_accordion_toggle_content">
<div class="vibe_editor_rich_text" style="font-size: 17px; font-weight: 500; color: #000;">

<span style="font-weight: 400;">In this activity, a child will learn and perform a prayer.</span>

</div>
</div>
</div>
<div class="vibebp_accordion_toggle">

<input id="accordion_Afn5MENOyACWean_1" name="accordion_Afn5MENOyACWean" type="radio" /><label style="font-size: 17px; font-weight: 500; color: #000;" for="accordion_Afn5MENOyACWean_1">Learning Outcome</label>
<div class="vibe_editor_column_content vibebp_accordion_toggle_content">
<div class="vibe_editor_rich_text">
<ul>
 	<li style="font-size: 17px; font-weight: 500; color: #000;">Enhancement of vocabulary.</li>
 	<li style="font-size: 17px; font-weight: 500; color: #000;">Because of Prayer, a child becomes focused and calm.</li>
 	<li style="font-size: 17px; font-weight: 500; color: #000;">Prayer assists in setting the tone for the day.</li>
 	<li style="font-size: 17px; font-weight: 500; color: #000;">Prayer helps in making better decisions.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>

<strong><span style="font-size: 17px; font-weight: 500; color: #000;">Description</span>:</strong>

<iframe title="Prayer" src="https://learn.bhavyata.com/wp-admin/admin-ajax.php?action=h5p_embed&id=30" width="725" height="690" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://learn.bhavyata.com/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>

</div>
&nbsp;
<div><strong><span style="font-size: 17px; font-weight: 500; color: #000;">Self-Assessment</span>:</strong></div>
<div><iframe title="Acitivity Assessment" src="https://learn.bhavyata.com/wp-admin/admin-ajax.php?action=h5p_embed&id=29" width="725" height="258" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://learn.bhavyata.com/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script></div>
</div>

Page Link

[Veronica]

hi the direct access is not allowed http://prntscr.com/21d7lt2 and the previous credentials are also not working

[Bhavyatafoundation]

This reply has been marked as private.

[Veronica]

thanks for the details I have checked on your the only gap I see is this one http://prntscr.com/21js8q2 and it's normal to show the division of the content to the header but if you still want to minimize that then we can perform it like this http://prntscr.com/21jsbyi

[Bhavyatafoundation]

This reply has been marked as private.

[Veronica]

hi the screenshot you have shared is broken please share the exact one so we can check the exact issue http://prntscr.com/22louy5

[Veronica]

ok I got it now http://prntscr.com/22lp3a3 thanks for screenshot can you please share the URL on which we can replicate this as we need to check the HTML structure for that

[Bhavyatafoundation]

This reply has been marked as private.

[Veronica]

This reply has been marked as private.

[Bhavyatafoundation]

This reply has been marked as private.

[Veronica]

hi add this in google analytical code:

document.addEventListener('unit_loaded', (e)=>{
setTimeout(()=>{
		let iframes = document.querySelectorAll('iframe');
		for(let i=0;i<iframes.length;i++){
		    let iframe = iframes[i];
		    let oldheight = localStorage.getItem(iframe.contentWindow.location.href);
		    if(oldheight){
		    	iframe.setAttribute('style','height:'+oldheight+'px;width:100%;');
		    }
		    iframe.contentWindow.addEventListener('load',function(){
		    	iframe.setAttribute('style','height:'+iframe.contentWindow.document.querySelector('html').scrollHeight+'px;width:100%;');
		    	localStorage.setItem(iframe.contentWindow.location.href,iframe.contentWindow.document.querySelector('html').scrollHeight);

		    	let resizeObserver = new ResizeObserver((entries) =>{ 

				  	iframe.setAttribute('style','height:'+iframe.contentWindow.document.querySelector('html').scrollHeight+'px;width:100%;');
		    		localStorage.setItem(iframe.contentWindow.location.href,iframe.contentWindow.document.querySelector('html').scrollHeight);
				});

				// start observing a DOM node
				resizeObserver.observe(iframe.contentWindow.document.body);

		    });

		}
	},300);
});

[Bhavyatafoundation]

Where exactly can I find this file to add the above code?

[Veronica]

hi add this code::

<script>
document.addEventListener('unit_loaded', (e)=>{
setTimeout(()=>{
		let iframes = document.querySelectorAll('iframe');
		for(let i=0;i<iframes.length;i++){
		    let iframe = iframes[i];
		    let oldheight = localStorage.getItem(iframe.contentWindow.location.href);
		    if(oldheight){
		    	iframe.setAttribute('style','height:'+oldheight+'px;width:100%;');
		    }
		    iframe.contentWindow.addEventListener('load',function(){
		    	iframe.setAttribute('style','height:'+iframe.contentWindow.document.querySelector('html').scrollHeight+'px;width:100%;');
		    	localStorage.setItem(iframe.contentWindow.location.href,iframe.contentWindow.document.querySelector('html').scrollHeight);

		    	let resizeObserver = new ResizeObserver((entries) =>{ 

				  	iframe.setAttribute('style','height:'+iframe.contentWindow.document.querySelector('html').scrollHeight+'px;width:100%;');
		    		localStorage.setItem(iframe.contentWindow.location.href,iframe.contentWindow.document.querySelector('html').scrollHeight);
				});

				// start observing a DOM node
				resizeObserver.observe(iframe.contentWindow.document.body);

		    });

		}
	},300);
});
</script>

in google analytical section here: http://prntscr.com/23ecqke http://prntscr.com/23ecs5j

[Bhavyatafoundation]

I've copy-pasted the above code and the problem still remains. Please check and let me know if I have to add any other additional steps for this code to work.

[Veronica]

hi for that you also need to add this: .course_content_content div div iframe { height:500px !important } in custom CSS section

[Author]

Posts