Indigo Layout Homepage TOC Question - Mobile Responsive View

[pfos029]

Hi All - I've been putting the finishing touches on my current project for work, and realized that on some of my sections that contain a lot of books and topics, the homepage TOC isn't showing the TOC items correctly when mimicking the "mobile" view. I did some counting, and it appears after ~14 items (books or topic pages) a new column is created. However, on sections with < ~14 items (books of topic pages) it displays as expected - one nice column. Below are some screenshots to help explain what I'm seeing. I've looked through the css and for the life of me can't figure out what to edit to remedy the "additional" column when the page view is shrunk down to mimic mobile devices.

Desktop Homepage View:

Mobile Homepage View:

Mobile View When I Open a Book that contains +14 items (books/topic pages) - it doesn't remain one uniform column, it shifts to the right and creates an additional column (there are two columns as shown below, totally 28 items):

When I open a different book that has less than 14 books/topic pages (either from the top level of the homepage, or in a sub-book, etc.), it stays as one uniform column which retains the responsive look:

Thanks in advance for any thoughts or suggestions to try!

[pfos029 · Accepted solution]

Wish I would have done more testing before posting my question. My browser was causing the issues with the TOC items shifting to the right. When viewed on an actual mobile device, it works beautifully. Please disregard my question and "identified issue" above. Thanks.

[Peter Grainge]

Useful to post the answer. I have seen such mismatches.

---

See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

[pfos029]

Of course. I was doing my initial testing to mimic the mobile responsiveness in Internet Explorer 11. This produced the issue of the TOC not becoming responsive and showing 2 columns.

When using my actual mobile device it behaved normally, with no second column added, etc. I tested in a different browser on my desktop and used Firefox. It behaved just like my mobile device. So it appeared to just be an issue IE11 based on my quick testing. I'll use Firefox going forward for any mobile "mimic testing."

[Jeff_Coatsworth]

Chrome has a neat trick buried in the Developer Tools that allows you to see how your pages look on different devices too.

[Jeff_Coatsworth]

Sorry, didn't have time to elaborate further - if you go into Developer Tools, there's an icon that is presented with hover text of "Toggle device toolbar   Ctrl-Shift-M" on it - clicking it or performing the toggle command presents the page's content emulating a device (there's a number of pre-set devices built in, but you can select more & add your own by going into the Dev Tools' Settings > Devices area.