: Can 'crumbs' in a long line of breadcrumbs (using Schema.org) be removed for smaller screen sizes? Let's say I have a page with 5 breadcrumbs; on a desktop, this looks fine but when viewed

@Radia820

It's actually very common to see sites using display: none on elements that do not render correctly on smaller screens. Not hiding breadcrumbs unless addressed can actually harm your mobile ranking due to Googles stance on Size Tap Targets Appropriately.


Small or tightly packed links or buttons are more difficult for users
to accurately press on a touchscreen than with a traditional mouse
cursor. To prevent users from being frustrated by accidentally hitting
the wrong ones, tap targets should be made sufficiently large and far
from other tap targets that a user can press them without their finger
pad overlapping any other tap targets. The average adult finger pad
size is about 10mm wide (a bit less than half an inch), and the
Android UI guidelines recommend a minimum tap target size of roughly
7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.


So even if you were to fit the breadcrumbs onto one line it would then cause issue with Size Tap Targets, so your only solution would be use to hide the breadcrumbs or think of a better way of presenting them, for example you could change display: inline-block to display: block which would then put the breacrumbs in a vertical menu like so:


Link 1
Link 2
Link 3
Link 4
Link 5


But obviously this would then take up a fair bit of the screen and means users would have to scroll. You could address this issue by using JavaScript to show the breadcrumbs when they request it, like a readmore button, here's some code to give you a little idea where I'm going with this:

HTML

<nav class="breadcrumbs">

<!-- This button is only visible on mobile devices -->
<a href="#" class="trigger">Breadcrumbs</a>

<!-- This menu is only hidden on mobile devices and is triggered by clicking the button above -->
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

</nav>


CSS

.trigger {
display: none;
}
@media only screen and (max-width: 40em) {
.breadcrumbs ul {
display: none;
}
.breadcrumbs ul.active {
display: inline-block;
}
.Breadcrumbs .trigger {
display: block;
}
}


JavaScript

$('.breadcrumbs .trigger').toggle(function () {
$(".breadcrumbs ul").addClass("active");
}, function () {
$(".breadcrumbs ul").removeClass("active");
});


But with all this said its prefectly acceptable to hide the breadcrumbs all together if you wish too, you can hide them using something like this:
@media only screen and (max-width: 40em) {
.breadcrumbs {
display: none;
}
}

Vote Up Vote Down