Nevermind. I have figured this out and it works fine on all platforms now. Thanks for your help anyway.

Alright, I think I have figured it out but I have run into another problem on mobile screens.

What I have done is, I have created two color sections, one in which the button resides and the other one which has the code block.

I have assigned developer ids to both respectively and I am targeting the containers under the div ids.

Which works fine for desktops and tablets. However, the phones are a problem.

From out of nowhere there seems to me a max-width: 85% and width: 85% values being re-assigned for the containers on mobile views.

Here’s my code:

.avia-caption-title {
  text-transform: lowercase !important;
  font-weight: normal !important;
}
.av-main-nav li a {
  font-weight: normal !important;
  font-size: 12px !important;
  color: #dedede !important;
}
.av-main-nav li a:hover {
  font-weight: normal !important;
  font-size: 12px !important;
  color: #ffffff !important;
}
body .column-top-margin {
  margin-top: 10px;
}
.content,
.sidebar {
  padding-top: 39px;
  padding-bottom: 40px;
}
.toggle_content {
  padding: 10px;
}
.av-special-heading {
  margin-top: 20px;
}
.js_active .tab_content {
  padding: 0;
}
img {
  border-radius: 0 !important;
}
@media only screen and (min-width: 1920px) {
  .flex_cell_inner .avia-image-container-inner,
  .flex_cell_inner .avia-image-container-inner img {
    width: 100%!important;
  }
}
.slide-entry-title {
  color: #666666 !important;
  text-transform: lowercase !important;
  margin-bottom: -20px !important;
  font-size: 13px !important;
}
.image-overlay {
  visibility: hidden;
}
.post-title,
.entry-title {
  text-transform: capitalize !important;
  font-weight: normal;
  letter-spacing: normal !important;
}
.slide-entry-title,
.entry-title {
  text-align: left !important;
  font-weight: bold;
}
.tab.widget_tab_comments {
  display: none!important;
}
#mobile-advanced li > a:before,
.html_header_mobile_behavior #mobile-advanced span > a:before,
#mobile-advanced .mega_menu_title:before {
  display: none;
}
#advanced_menu_toggle,
#advanced_menu_hide {
  border-style: none;
  background-color: transparent;
}
#advanced_menu_toggle:hover,
#advanced_menu_hide:hover {
  border-style: none;
  background-color: transparent !important;
  color: #000000 !important;
}
.slide-entry-excerpt,
.entry-content {
  margin-top: 10px;
}
#header_main {
  border-style: none !important;
}
@media only screen and (max-width: 768px) {
  .flex_column {
    width: 100% !important;
    margin-left: 0;
  }
}
@media only screen and (max-width: 640px) {
  .avia-fullscreen-slider {
    top: -100px;
    margin-bottom: -100px;
  }
  .slideshow_caption {
    padding-top: 0 !important;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
  }
  .avia_textblock,
  .avia_textblock * {
    font-size: 12px !important;
  }
  .flex_column_table,
  .av-equal-height-column-flextable {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 766px) {
  #vidskipbt .avia-button {
    margin-right: 60px;
  }
  #vidskipbt {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    min-height: 1px !important;
  }
  #vidskipbt .container {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    min-height: 1px !important;
  }
  #vidwelcome .container {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
}
@media only screen and (max-width: 360px) {
  .avia-fullscreen-slider {
    top: -140px;
    margin-bottom: -140px;
  }
  .slideshow_caption {
    padding-top: 0 !important;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
  }
  .avia_textblock,
  .avia_textblock * {
    font-size: 12px !important;
  }
  .flex_column_table,
  .av-equal-height-column-flextable {
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 1024px) {
  #mobile-advanced,
  #advanced_menu_toggle,
  #advanced_menu_hide {
    display: block;
  }
  nav.main_menu {
    display: none;
  }
  .responsive #top .slideshow_caption h2 {
    font-size: 20px !important;
  }
}
.footer {
  border-style: none;
}
#vidskipbt .avia-button {
  margin-right: 60px;
}
#vidskipbt {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  min-height: 1px !important;
}
#vidskipbt .container {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  min-height: 1px !important;
}
#vidwelcome .container {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
}
.avia-section.av-minimum-height .container .content {
  vertical-align: top;
}
@media only screen and (max-width: 769px) {
  #footer .flex_column {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
.avia-menu {
  border-style: none !important;
}

Any help is appreciated.

Hi Mike,

Just to give you a bit of an intro of what I am trying to do here:

1. I have created a welcome page that will play a fullscreen YouTube video.
2. This page has a button to skip the video or proceed to the website.

I have taken a different route now since javascript doesnt allow fullscreen videos to be shown on tablets and phones.

I am now using a plugin called ARVE Advanced Responsive Video Embedder, that somehow magically displays videos in fullscreen mode on bpth, phones and tablets.

I however, need a container (code block in this case) to be full width and height of the screen which I am having trouble with.

I have placed the code block inside a color section (since that can be fullwidth), however, the code block seems to be nested within two other divs!!

I am posting the login below for you to have a look please.

Hi Rikard,

Here are the login details.

Thanks for your help.

Hi Ismael,

Thanks for looking into this. I have tried the above already before you posted and the thing is even if we pre-resize a portrait image or set it’s size without cropping, for example an image of 2160x3840px to 1210px width, we are left with a height of 2151px, which is HUGE for a post image. Now if I was doing the blog posts myself I have no problem resizing my featured images in photoshop and uploading them tweaked or fixed, but the issue is it’s for a client and she’s not really that tech savvy, i’m afraid.

Hi Rikard,

Images that are landscape are no problem, however, images that are portraits is what’s the problem here. For example, if an image of a person is chosen and it’s in portrait format the person’s head gets chopped off and it looks really weird. I was hoping to get an answer on what would be the best way to deal with such images while posting (without having to resort to photoshop, etc. as the client is not at all technical). Appreciate any help with this.

For anyone else interested, changing the percentage value 67.5% in the above code changes the width of the area the code fills with the color.

Hi Elliot,

Thanks for the help. That did cross my mind as a last resort, however, I got a reply from Josue as well. Not sure why the reply isn’t displaying here. What worked for me is the code here:

@media only screen and (min-width: 767px) {
.sidebar_right .container {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 67.5%, #e7f6f6 67.5%, #e7f6f6 67.5%, #ffffff 67.5%, #e7f6f6 67.5%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(67.5%,#ffffff), color-stop(67.5%,#e7f6f6), color-stop(67.5%,#e7f6f6), color-stop(67.5%,#ffffff), color-stop(67.5%,#e7f6f6));
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
background: -o-linear-gradient(left, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
background: -ms-linear-gradient(left, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
background: linear-gradient(to right, #ffffff 0%,#ffffff 67.5%,#e7f6f6 67.5%,#e7f6f6 67.5%,#ffffff 67.5%,#e7f6f6 67.5%);
}
}

I still need to understand how the css to this works, though this is a cool solution without having to introduce a background to the container.

That’s alright, Devin. I understand. I am, however, now restyling the mega menu using a child theme to create a somewhat closer effect of what has been displayed in my example.

I have run into a problem though, the height of the logo seems to influnce the .avia_menu height, and no matter what you do, the whole layout breaks. I have tried a lot of workarounds to this, but it seems there are too many interlinking css references that makes it hard, haha!

Anyway, my code now is:

.social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
    height: 70px;
    line-height: 90px;
}

<strong>using this to restrict the height of the main menu and make the sub menus appear as closer to the main as possible.</strong>

#avia-menu a: {
margin-top: 10px;
height: 30px !important;
}

<strong>re-trying here to set the height but the logo height in the header keeps interfering</strong>

#avia-menu a:hover {
background-color: #ffffff !important;
color: #70b115 !important;
}

any possible help to this would be highly appreciated!

here’s my enfold work in progress so far: http://steroidim.com/wpdemo/