Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #274845
    Admin2019
    Participant

    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.

    #274910
    Skandha
    Keymaster

    @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

    #274930
    Admin2019
    Participant

    Fantastic Skandha.

    That worked a treat.

    Kindest regards.

    #274933
    Skandha
    Keymaster

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

    Kind Regards,
    Skandha

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.