Hiding Breadcrumbs only on mobile devices

lulu99 · 2016-05-11 04:45:38

Hi.

Is it possible to hide breadcrumbs only on mobile devices?

Regards Kai

rod barbee · 2016-05-11 04:50:05

not in the Designer. You could do this with custom css.
Try using this in a media query:

ul.breadcrumbs {
display: none;
}

The media query will depend on what size devices you want to hide the bread crumbs. For more on writing media queries:
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

lulu99 · 2016-05-11 05:15:19

Thanks Rod. Wouldn't it be possible to put it in the designer so we can decide by switch if we want it or not? Like the menu is working?

rod barbee · 2016-05-11 06:07:33

not my department
as my signature says, I'm just a user with too much time on his hands.

Matt may add it it, but I know he doesn't want to start adding too much to the designer as it the interface can get cluttered quickly.

But it's easy to do with custom css.

pideja · 2019-11-12 23:27:21

I am also trying to reduce the size of the breadcrumbs on the mobile or get rid of them altogether. I tried the code suggested above but no response. The fact is, that the way I wrote the CSS in regards to the breadcrumbs, they show up ok on the desktop but are way too big on the phone.
my CSS:

/* Display breadcrumbs on the desktop and list items side by side -----------------------------*/
ul.breadcrumbs li {
    font-size: 2rem;
    padding: 60px 16px;
}

/* Add a color to all links inside the list */
 .breadcrumbs a {
	font-size: 2rem;
	color: black;
}
.breadcrumbs li a:hover {
    font-weight: bold;
     color: #FFF6D5;
    }

and

/* Breadcrumbs on extra small devices (phones, 600px and down) -------------------------- */
@media only screen and (max-width: 600px){
    ul.breadcrumbs li {
display: none;
}

but nothing happens. I still have gigantic breadcrumbs on the mobile!

pideja.ca

Any ideas?

rod barbee · 2019-11-12 23:42:46

this code is on line 68 of your custom css:

ul.breadcrumbs li {
    font-size: 2rem;
    padding: 60px 16px;
}

and it's inside of a media query that begins on line 40

@media screen and (max-width: 640px) {

that's the media query to control when text showed in either the main copy or pallet, but you never closed the media query.

rod barbee · 2019-11-12 23:50:46

with all those media queries you use, many times the problem is that they don't get closed

When writing html or css, it helps to create your structure first, and then fill in the necessary code.

So with your media queries, start with the full query, including the opening and closing braces:

@media screen and (max-width: 640px) {


}

Then add the necessary css:

@media screen and (max-width: 640px) {
       #main-copy-credits {
	display:block;
       }
       #pallet-credits {
	display:none;
       }

}

pideja · 2019-11-12 23:54:21

My CSS file is now 174 lines long with 7 distinct media queries! There must be some cleaning and simplifying to be done.

The correction you suggested worked. I displaced the code relating to the breadcrumbs outside the media query and it immediately applied to the desktop and the mobile in a more suitable fashion.

Thank you.

Matthew · 2019-11-15 16:28:43

You can combine media queries much as you like, if they're using the same values. But really, 174 lines of CSS is not cause for alarm.

Community @ The Turning Gate

#1 2016-05-11 04:45:38

Hiding Breadcrumbs only on mobile devices

#2 2016-05-11 04:50:05

Re: Hiding Breadcrumbs only on mobile devices

#3 2016-05-11 05:15:19

Re: Hiding Breadcrumbs only on mobile devices

#4 2016-05-11 06:07:33

Re: Hiding Breadcrumbs only on mobile devices

#5 2019-11-12 23:27:21

Re: Hiding Breadcrumbs only on mobile devices

#6 2019-11-12 23:42:46

Re: Hiding Breadcrumbs only on mobile devices

#7 2019-11-12 23:50:46

Re: Hiding Breadcrumbs only on mobile devices

#8 2019-11-12 23:54:21

Re: Hiding Breadcrumbs only on mobile devices

#9 2019-11-15 16:28:43

Re: Hiding Breadcrumbs only on mobile devices

Board footer