Support » Plugin: Gantry 5 Framework » WordPress Gantry5 Helium Theme iPhone Problem

  • Resolved Vern Southern

    (@vernsouthern)


    First the details

    • WordPress Version 4.6
    • Gantry 5 Framework: Version 5.3.4
    • Helium (v5.3.4 / g5_helium)
    • PHP Version 5.5.38

    This is the problem, (Only on iPhone);
    Client: There is this big gap on the Residential Properties Portfolio page on mobile view.

    Vern: What I cannot determine is what is causing the problem. Is it WordPress, Gantry5, the Helium theme or is it an iPhone issue?

    http://www.arcadia-estates.com/luxury-villa-properties-cyprus/

    I do not own an iPhone so I am testing the page here;
    Responsimulator – Test websites on iPhone and iPad

    This is what my client is seeing on his iPhone
    This is what my client is seeing on his iPhone

    This is what I see on my Android phone;
    This is what I see on my Android phone

    CSS
    .entry-title 
    {
      font-size: 20px;
      line-height: 20px;
      margin: 20px 0px 0px 0px;
      padding: 0px;
    }
    #g-mainbar .g-content, 
    #nav_menu-7, 
    #nav_menu-5, 
    #text-2, 
    #text-3, 
    #nav_menu-7 #menu-respro, 
    #nav_menu-5 #menu-compro 
    {
      margin: 0px;
      padding: 0px;
    }
    .left-menu-header {
      font-size: 14px; 
      font-weight: bold; 
      line-height: 16px; 
      text-align: center; 
      background: #004990; 
      color: #ffffff; 
      padding: 10px 0px; 
      margin-top: 50px;
    }
    @media all and (max-width: 499px) and (min-width: 50px) {
      .left-menu-header {
        margin-top: 5px;
        margin-bottom: 0px;
      }
      #g-sidebar .g-content {
      margin-top: 0px;
      padding-top: 0px;
      }
    }

    Any help or advice would be greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Gantry

    (@gantry)

    Hi,

    This is what’s causing it in the wwdstyle.css file :

    #g-mainbar {
        height: 100%;
    }

    You need to change it or limit only to the desktop view using :

    #g-mainbar {
        height: 100%;
    
        @include breakpoint(mobile-only) {
            height: auto;
        }
    }

    Please remember that @include will only work in the SCSS file as it needs to get compiled. If you want to use regular CSS syntax it would be :

    #g-mainbar {
        height: 100%;
    
        @media only all and (max-width: 47.938rem) {
            height: auto;
        }
    }

    Thanks,
    Jakub

    • This reply was modified 2 years, 10 months ago by  Gantry.
    • This reply was modified 2 years, 10 months ago by  Gantry.

    Thanks so much. I had to reconfigure it like this to get it to work.

    #g-mainbar {
      height: 100%;
    }
    @media all and (max-width: 499px) and (min-width: 50px) {
      #g-mainbar {
        height: auto;
      }
    }

    I really appreciate it, Thanks again.

    Plugin Author Gantry

    (@gantry)

    Great! Can you please mark this topic as resolved ? 🙂

    Thanks!

    Thanks Again

    • This reply was modified 2 years, 10 months ago by  Vern Southern. Reason: Marking as Resolved
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WordPress Gantry5 Helium Theme iPhone Problem’ is closed to new replies.