0
Welcome Guest! Login
0 items Join Now

Scrolling thru table not working

Last Post
Search Topic

  • Scrolling thru table not working

    Posted 6 years 3 months ago
    • I have a table in an article that is as wide as my site. On the computer the page is perfect but when i go to a mobile device the table stays the same size (even though it is built with percentages not pixles). Then I cannot scroll left or right ont he page to see the entire contents. i can scroll up and down but thats useless. Iv'e tried it in several themes but it refises to work. What am I doing wrong?

      wnmdsummit.org/index.php/2016-01-20-15-17-58/hotel-list
    • Last Edit: 6 years 3 months ago by Mark J Kilcoyne.
    #1373109
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Scrolling thru table not working

    Posted 6 years 3 months ago
    • 1. I'd never use tables as they are the hardest thing to get working properly across all browsers. I'd use Gantry 5 resposnive grids instead.

      2. The table is acting responsively but you reach a point where the column is the word width in that column and the CSS setting says not to split words currently. (see screenshot).

      3. This will help:
      .g-content-array {
  margin-left: 0;
  margin-right: 0;
}

.g-content-array table {
  display: block;
  overflow-x: scroll;
}

      ... at least the table get's a scroll bar at the bottom by doing the above.

      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.


      4. You font is too big for mobile so consider adding some custom CSS in mediq qeries to change the font size on mobile for that table.
      // 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) {

}
// 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";

      Media queries work like this:

      if the viewport size is xxxxx then
      use this css
      endif


      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.
    #1373110

Time to create page: 0.059 seconds