XF 1.2 Help with responsive breadcrumb issue

[Andy.N]

Here is a page that has 2 simple top and bottom navigation breadcrumbs. When you resize the windows to make it smaller, it appears the "breadcrumb" has a longer width than the pageWidth setting.

There must be something in the navigation.css or breadcrumb.css that I need to adjust. The style is Flexile and the author seems to abandon it so hope to get help from the community
.

 

[rdn]

The url?
Use % as width, like 100%

 

[Russ]

Some breadcrumbs have a negative margin to get it in the right spot, you may just need to adjust the margin to like 0 on responsive

 

[Steve F]

/* Responsive Settings */
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
        .breadBoxTop, .breadBoxBottom
        {
                margin: 0 -10px !important;
        }
}
</xen:if>

That seems to fix it, add it to EXTRA.css. Previously it was margin: 0 -20px;

 

[Andy.N]

Thank you guys. Glad to be able to get this off my to-fix list.

 

[Andy.N]

/* Responsive Settings */
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
        .breadBoxTop, .breadBoxBottom
        {
                margin: 0 -10px !important;
        }
}
</xen:if>

That seems to fix it, add it to EXTRA.css. Previously it was margin: 0 -20px;

Steve,
Thanks again, just discovered that having that fix will help on the XF page, but not on thread view. For example, if you look at this url and resize your window, the top breadcrumb is short of 10px while the bottom breadcrumb is 10px too long or something.
https://www.quantnet.com/threads/students-intro-thread.7522/