Table of contents alignment on mobile

Jlawal
Top Contributor

Hello,

 

I'm working on a number of pages for our support site and have stumbled across an issue when viewed on mobile.

 

This is the template used for it. The Table of Contents is squished to the right of the page and on a tablet it sometimes blocks the rest of the text.

 

How can i stop that from happening?

 

Any help would be greatly appreciated.

 

Many thanks,

 

Jamila

0 Upvotes
7 Replies 7
edjusten
HubSpot Employee

Hi @Jlawal  The link to your design manager template did not come through. Can you send again? 

 

Thank you,

 

Ed 


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Jlawal
Top Contributor

Hi @edjustenEd,

 

Thanks for your reply. Sorry i didn't tag you properly the first time i submitted this post Smiley Embarassed


This is the preview page and this is the template in the design manager.

0 Upvotes
edjusten
HubSpot Employee

Hi @Jlawal  We adjusted some CSS to push the menu back to the left. Can you take a look? 

 

Ed 


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Jlawal
Top Contributor

Hi @edjusten

 

The menu is still pushing to the right on my end.

 

example.gif

0 Upvotes
edjusten
HubSpot Employee

Hi @Jlawal  We added the following to the template HTML Head:

 

@media (max-width:480px) {
.stratus-pillar__nav.stratus-pillar__toc--vertical {
padding-left: 0;

 

Can you take a look again?

 

Thanks,

 

Ed 


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Jlawal
Top Contributor

Hi @edjusten

 

The table is still squished to the right on smaller screens and overlaps the text when the user scrolls down.

 

Thanks,

 

Jamila

0 Upvotes
edjusten
HubSpot Employee

Hi @Jlawal Attached is what I'm seeing when viewing over mobile. It looks like this tempate was orginally designed as a pillar page. Pillar pages were designed to serve as 10x content pages with the Content Stratgy tool. While it is not impossible to alter them for other uses, it is not recomended. Further adjustment may require the help of a web developer.  

 

Ed 

mobile.gif

 

 

 

 


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes