We announce the release of Mags Pro with lots of features. View beautifuldemos

Mobile Issue – Video Post Not Displaying Correctly

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Theme Horse Support Team 1 month, 4 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #63375

    alexlisowski_dci
    Participant

    Hi there, thank you for the theme, it’s great. One issue I have is that when someone is on their phone and you click through to the video post, you only see half of the video or less (the rest of it is offscreen). Is there a fix to this or is this theme not designed for video? Happy to upgrade to pro if that fixes it.
    You should be able to see the issue here if you view it through a phone.
    Thanks again

    #63449

    Hi there,

    We will fix this in next version update.
    Meanwhile, login to your WP Dashboard and go to Appearance > Customize > Additional CSS and paste the below custom css code:

    .wp-block-embed {
    	position: relative;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper {
    	position: relative;
    	display: block;
    	width: 100%;
    	padding: 0;
    	overflow: hidden;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:after {
    	display: block;
    	content: "";
    	clear: both;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe {
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before {
    	content: "";
    	display: block;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before {
    	padding-top: 100%;
    }
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before {
    	padding-top: 200%;
    }
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    	padding-top: 56.25%;
    }
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before {
    	padding-top: 50%;
    }
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
    	padding-top: 42.85%;
    }
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    	padding-top: 75%;
    }
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before {
    	padding-top: 50%;
    }

    Thank you!

    #63453

    alexlisowski_dci
    Participant

    Amazing. Thank you so much!

    #63604

    Welcome anytime @alexlisowski_dci 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.