Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1024272

    My website looks totally fine in desktop view but when i view in the ipad/pro it only displays correctly when viewed in landscape but when you view it in portrait mode it doesnt show the entire right side area of the website;

    “>portrait mode
    portrait mode

    hope to hear from you guys soon.


    • This topic was modified 1 year, 3 months ago by  shalenie.

    Did you allready get a solution for this? I have the same problem….


    No, I dont have yet.

    still waiting for response.



    Sorry for the late response. You can use the following css codes 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,

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

You must be logged in to reply to this topic.