Problem display in portrait orientation ipad pro

Hi,

Sorry for the late response. You can use the following css code to make the left sidebar switch to the top header when the screen width is equal or less than 1024px.

@media only screen and (max-width: 1024px) {
    .responsive #top #wrap_all #header {
      position: relative;
      width: 100%;
      float: none;
      height: auto;
      margin: 0 !important;
      opacity: 1;
    }

    .responsive #top #wrap_all .container {
      width: 85%;
      max-width: 85%;
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0;
      float: none;
    }

    .responsive #top .logo {
      position: static;
      display: table;
      height: 80px !important;
      float: none;
      padding: 0;
      border: none;
      width: 80%;
    }

    .responsive .logo a {
      display: table-cell;
      vertical-align: middle;
    }

    .responsive .logo img {
      height: auto !important;
      width: auto;
      max-width: 100%;
      margin: 0;
      display: block;
      max-height: 80px;
    }

    .responsive #header_main .inner-container, 
    .responsive .main_menu {
      position: static;
    }

    .main_menu .avia-menu, #header_main_alternate, 
    .fallback_menu {
      display: block;
    }

    .responsive #top #main {
      padding-top: 0 !important;
      margin: 0;
    }

    .container #advanced_menu_toggle, 
    #advanced_menu_hide {
      display: block;
    }

    .responsive.html_header_sidebar #top #header .social_bookmarks, .avia-custom-sidebar-widget-area, .html_header_sidebar #header .av-main-nav > li  {
        display: none;
    }

    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block;
    }

    .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }
}

Best regards,
Ismael

Hi Shalenie,

Welcome back!

Yes, you can place the code in the Quick CSS field or the child theme’s style.css file. After adding the code, please don’t forget to toggle the Enfold > Performance > File Compression settings to regenerate the scripts and stylesheets. And you might also have to remove the browser cache/history in order to see the changes.

Best regards,
Ismael

Hi!

Daghan salamat sa screenshot. Sensya na late gamay. Murag nabalhin naman ang header from left to top, so ok na to. Naa na ta space gamay para sa content. Kanang mga cells sulod sa grid row element, pwede nato na himuon full width or i-adjust ang width gasa iPad Pro nga view para naa ta extra space para sa mga elements sa sulod. Since 1366px ang maximum screen width kana nga device, try nato i-add ni nga code sa Quick CSS field.

@media only screen and (max-width: 1366px) {
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    padding-left: 8% !important;
    padding-right: 8% !important;
    width: 100%;
  }
}

Pwede pod nato i-hide yung mga cells sa mobile view kung prefer nimo. Edit the cells, go to the Advanced > Responsive toggle, then set nato ang Mobile display settings sa second nga option.

Cheers!
Ismael