Enfold Remove left & right padding margins on videos in color sections on mobile - Support

Tagged: cell, Color, column, gap, margin, padding, remove, Section, video

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

Author

Posts
March 4, 2017 at 5:49 pm #755633

fullrotation
Participant

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

March 5, 2017 at 2:01 am #755775

Mike
Moderator

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

Best regards,
Mike

March 5, 2017 at 2:49 pm #755931

fullrotation
Participant

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 HERE

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

March 5, 2017 at 6:20 pm #755971

Basilis
Inactive Moderator

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

March 5, 2017 at 6:28 pm #755973

fullrotation
Participant

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

March 6, 2017 at 9:07 am #756248

Rikard
Keymaster

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

March 8, 2017 at 12:05 pm #757722

fullrotation
Participant

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

March 9, 2017 at 3:30 pm #758397

Rikard
Keymaster

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

March 17, 2017 at 10:55 pm #762770

fullrotation
Participant

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

March 20, 2017 at 5:03 am #763461
Rikard
Keymaster
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
March 22, 2017 at 12:24 am #764456

fullrotation
Participant

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

March 22, 2017 at 2:39 pm #764795

Rikard
Keymaster

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

March 22, 2017 at 6:58 pm #764993
Guenni007
Participant
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.
March 26, 2017 at 8:08 am #766863

Rikard
Keymaster

Hi @Guenni007,

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

Best regards,
Rikard

May 28, 2020 at 12:26 pm #1217322

Steve
Participant

Hi, same issue here. Any CSS I can use to make the video on the page go to edges on mobile?

Many thanks

May 29, 2020 at 12:06 pm #1217664
Mike
Moderator
Hi,
Thanks for the link, I assume that you are looking to make the video under “Success stories” full width on mobile, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
@media only screen and (max-width: 767px) { 
.responsive #top.page-id-2167 #wrap_all #av_section_7 > .container {
	width: 100% !important;
    max-width: 100% !important;
}
.responsive #top.page-id-2167 #wrap_all #av_section_7 > .container .av_two_fifth .iconbox_right_content {
	margin: auto !important;
    width: 85% !important;
}
}
```
Best regards,
Mike
May 30, 2020 at 3:37 am #1217898

Steve
Participant

Yes, thanks for this. Any way I can create custom class or something similar, so that I can apply this to all the videos and if I change the structure of the page, I don’t need to edit custom css?

Many thanks!

May 30, 2020 at 9:04 pm #1218073
Mike
Moderator
Hi,
You can add a custom ID to the color section that contains the video and icon box elements, then each time you use the setup and the custom ID it should work, but you can only use the ID once on each page.
Here is the example css with a custom ID of “full-width-video-section” for you to use.
```
@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #full-width-video-section > .container {
	width: 100% !important;
    max-width: 100% !important;
}
.responsive #top #wrap_all #full-width-video-section > .container .av_two_fifth .iconbox_right_content {
	margin: auto !important;
    width: 85% !important;
}
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.