[Admin2019]

Hello team.

I have an issue with padding on my website when viewed on a mobile phone.

You can see it here in a screen grab:

https://justpaste.it/8wh4o

This is the page in question:

http://cathalocuaig.com

You can see that there is a huge amount of padding above the embedded video and below the video.

It looks very bad when viewing on a phone.

Can I reduce this space?

Many thanks.

Cathal.

[Skandha]

@admin2019: Hello Cathal,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.wp-block-embed__wrapper {
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;	
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 790px) {
	.wp-block-embed__wrapper {
		padding-bottom: unset;
		height: unset;	
	}
	iframe {
		position: static;
		height: 425px;
	}
}

Let me know if this works out!
Kind Regards,
Skandha

[Admin2019]

Fantastic Skandha.

That worked a treat.

Kindest regards.

[Skandha]

@admin2019: Glad it worked out. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts