Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #755633

    Hi I’d like to remove ALL left and right margins on ALL videos on mobile only.
    I managed to do it with help from another post and custom attribute but for when it was just one column but not two columns.

    Basically I have a color section with two 1/2 col cells next to each other, I have text in one 1/2 col / cell and a video in the other next to it.
    When viewed on a mobile I want the video to go right up to the edges of the screen, no gaps , margins, padding at all.

    I cant work out how to do this sorry, any help appreciated
    Many thanks
    site is http://fullrotation.com

    #755775

    Hey David,
    Can you add a screenshot of the area you are talking about?

    Best regards,
    Mike

    #755931

    Hi, I just want video in a color section column to go full width on mobiles only. But I’ve put together a collection of screen shots hopefully make this clear: IMAGE LINK HEREFull width video on mobiles explanation

    Bottom right shows what I want, …on the left what it looks like currently. Just nee dto remove margins or padding for ALL videos on my site for mobile only Many thanks

    #755971

    Hi!

    Can you please link us the page you are speaking for.
    I am trying to find it but after 2-3 clicks could not locate it and we can not go blank around all the site.
    Please provide the link so we can identify and provide the proper CSS.
    Thanks a lot

    Best regards,
    Basilis

    #755973

    HI sorry this particular page is http://fullrotation.com/animated-explainer-videos/
    It was on the “services” menu drop down

    But as I mentioned this is just one example, I want to apply this to ALL videos for ALL pages across my whole site. Many of my pages have videos on, and I want the same, so didn’t think I needed to give a particular page sorry

    So another page would be http://fullrotation.com/motion-graphics-design/
    this has four videos again in two columns in one single color section, but on mobile they are just viewed vertically one on top of the other which is great, but again need them to go to full width with NO margin left or right

    thanks for you time again
    David

    #756248

    Hi David,

    There is no way of doing that unfortunately since the videos are indside of a container element, you would have to target each container individually using CSS. In this case you have other content in the same container so it would make that content go full width as well.

    Best regards,
    Rikard

    #757722

    HI Rikard, sorry for the late reply. Thats a shame, I wasn’t sure if it was possible, videos just look so much better full width on mobiles and get that extra size.

    I managed to do it as you say with just one single column in a single color section
    Many thanks

    #758397

    Hi,

    Ok, thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #762770

    Hi sorry to bring this back up but I’ve been trying to live with this but it is really bugging me. There must be some way of achieving this? It just does not look good on a mobile having the margin and videos not touching the edge of the screen.

    I’m no developer but is there a way to …
    a) Split the two columns out into separate col sections on mobile only? OR
    b) remove all padding / margins, but then apply it back to just the text column on mobiles?
    c) replace the color section completely with two separate ones with the same content on mobile only
    or something else to achieve this?

    Thanks for your time, again

    #763461

    Hi,

    Yes, there is. You can either target the containers individually, but you will need to be able to write CSS for this option. You could also try to give your Color Sections ID’s to show/hide the correct one for mobile, you could use CSS like this to achieve that:

    @media only screen and (min-width: 768px) {
    #section-desktop {
      display:block !important;
    }
    #section-phone {
      display:none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    #section-desktop {
      display:none !important;
    }
    #section-phone {
      display:block !important;
    }
    }

    Best regards,
    Rikard

    #764456

    Thanks Rikard that’s great! I was just looking into how to do this anyway for other elements on my home page. I’ve got that working.
    It seems to work as a custom ID or custom css class. Just to clarify ID’s are only used once per page is that right, but effectively do the same as custom css classes? doesnt seem much difference to me

    thanks again

    #764795

    Hi,

    Great, glad we could help. Yes that is the proper way of using classes and id’s, an id should only be used once and classes can be assigned to multiple elements.

    Best regards,
    Rikard

    #764993

    Well i try to give the .container a class if it contains a .avia-video class:

    this to functions.php in child-theme

    function add_video_style(){
    ?>
    <script type="text/javascript">
    (function($){
    	$(window).load(function() {
    		if ($(window).width() < 480) {
    			$('.container').has('.avia-video').addClass('video-test');
    
    		} else {
    			$('.container').has('.avia-video').removeClass('video-test');
    		}
    	})
    	$(window).resize(function() {
    		if ($(window).width() < 480) {
    			$('.container').has('.avia-video').addClass('video-test');
    
    		} else {
    			$('.container').has('.avia-video').removeClass('video-test');
    		}
    	})
    })(jQuery);
    </script>
    <?php 
    }
    add_action('wp_footer', 'add_video_style');

    with:

    .container.video-test {
        max-width: 100% !important;
        width: 100% !important;
    }

    but i can not select specifically the other containers adjacent to avia-video
    as Rikard said: In this case you have other content in the same container so it would make that content go full width as well.

    #766863

    Hi @guenni007,

    Sorry for the late reply. Could you post a link to where we can see the problem?

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.