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

WordPress Gantry5 Helium Theme iPhone Problem

  • Resolved Vern Southern

    (@vernsouthern)


    6 years, 8 months ago

    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)

    6 years, 8 months ago

    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 6 years, 8 months ago by Gantry.
    • This reply was modified 6 years, 8 months ago by Gantry.
    Thread Starter Vern Southern

    (@vernsouthern)

    6 years, 8 months ago

    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)

    6 years, 8 months ago

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

    Thanks!

    Thread Starter Vern Southern

    (@vernsouthern)

    6 years, 8 months ago

    Thanks Again

    • This reply was modified 6 years, 8 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.

Topic Tags

Views