Highlighted

Indigo Layout Homepage TOC Question - Mobile Responsive View

Explorer ,
May 03, 2018

Copy link to clipboard

Copied

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!

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.

Topics

HTML5 layout

Views

241

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Indigo Layout Homepage TOC Question - Mobile Responsive View

Explorer ,
May 03, 2018

Copy link to clipboard

Copied

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!

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.

Topics

HTML5 layout

Views

242

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
May 04, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 04, 2018

Copy link to clipboard

Copied

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


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

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 04, 2018

Copy link to clipboard

Copied

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."

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 04, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...