0
Welcome Guest! Login
0 items Join Now

display on smartphone

  • display on smartphone

    Posted 9 years 2 weeks ago
    • Hello

      When I view the site on my smartphone (360x640) or other display (768x1024 800x1280), there are elements that do not appear:
      - Module mod_roksprocket Tabs home page

      - There is the menu button in the text (see screen copy)

      Thank you for your help

      Best Regards
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: display on smartphone

    Posted 9 years 2 weeks ago
    • Because to the way you have constructed you page your roksprocket tabs is bing obscured by your form so you will need to write some custom CSS do deal with this using media queries.

      For example to deal with the menu item overlapping you can add a margin to the header...
      // Gantry 5 custom CSS file
      
      // import breakpoints
      @import "dependencies";
      
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
      
      // commonly used media queries
      
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
      
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
      
      }
      
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
      
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
      
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
      
      }
      
      // Less commonly used media queries
      
      // typically min 60rem
      @include breakpoint(desktop-only) {
      
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
      
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
          #g-header .g-block:first-child {
              margin-top: 40px;
          }
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      
      }
      
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
      
      }
      
      @import "nucleus/mixins/breakpoints";

      You could use the same technique to deal with your form obscuring the roksprocket tabs.

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.049 seconds