Changing mobile menu browser width and screen options for video elements

Hey goingthewholehogg,

Let’s stick to one problem at a time, please try this in Quick CSS to change the mobile menu breakpoint:

@media only screen and (max-width: 1040px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

Best regards,
Rikard

Hi,
If I understand correctly you would like to hide the video element in the 1/2 column on your homepage under 990px, in doing so it leaves the other 1/2 column to the right. So in this code, we will hide the video & make the other 1/2 column full width:

@media only screen and (max-width: 990px) { 
#top.home .avia-builder-el-2 {display:none !important; }
#top.home .avia-builder-el-5 {width: 100% !important; margin-left: 0px !important; }
}

Then you wanted to hide the slider between 990px and 1040px:

@media only screen and (min-width: 990px) and (max-width: 1040px) { 
#top.home #fullscreen_slider_1 {display:none !important; }
}

Best regards,
Mike

Hi,
So I understand that my assumption about hiding the 1/2 column that the video is in, and making the 1/2 column with the text full width, is the correct approach.

To make your changes site wide the best approach would be to add custom classes to the elements, so for all of the videos add the same class to the 1/2 column that the video is in, and another class for all of the columns that the text is in.
For example use “1014video” for the video columns & “1040text” for the text columns

Then this css will work for all of the pages and not conflict with other elements now or future.

@media only screen and (min-width: 1040px) { 
.1040video {display:none !important; }
.1040text {width: 100% !important; margin-left: 0px !important; }
}

Then for the slider follow the same principal and add a custom class such as “1040slider” and use this css:

@media only screen and (max-width: 1039px) { 
.1040slider {display:none !important; }
}

Best regards,
Mike

Hi,
Ok, so I had misunderstood which slider we wanted to hide, I thought it was the top one, but turns out it is in the 1/2 column. So forget the whole 1/2 column text being full width thing :)
So this is the code I added:

@media only screen and (min-width: 1040px) { 
.homevideo {display:none !important; }
}

@media only screen and (max-width: 1039px) { 
.homeslider {display:none !important; }
}

and I renamed your homepage elements & the Saryangdo hike post elements and unchecked the screen options for the elements, and cleared all 3 caches!
Now the video in the slider auto plays for desktops & the video element shows for tablets and mobile.
Please clear your browser cache and check.

Best regards,
Mike