Only show image when user is/isn't on mobile

[MegAmi24]

I want to make it so that an image only appears (or more specifically, the image that is shown changes) when the page is or isn't viewed on mobile, similar to how you can make it so one only appears in light/dark mode. How can I achieve this?

[kamilkrzyskow]

Hello @MegAmi24,
you'd use extra CSS with a media query.

mkdocs-material/src/overrides/home.html

Lines 54 to 59 in 2e9bd81

	/* Hide navigation */
	@media screen and (min-width: 76.25em) {
	.md-sidebar--primary {
	display: none;
	}
	}

To hide on mobile, the limiter max-width: 45em should probably be fine.
Then add a CSS class to your image with attr_list like .hide-on-mobile
And combine this selector with the media query

.hide-on-mobile {
  display: none;
}

References:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css
• https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media

[MegAmi24]

Thank you for this! For reference, this is what I've added to my CSS file:

/* Hide .desktop-only content if on mobile */
@media only screen and (max-width: 600px) { 
    .desktop-only { 
        display: none; 
    } 
}

/* Hide .mobile-only content if not on mobile */
@media only screen and (min-width: 601px) { 
    .mobile-only { 
        display: none; 
    } 
}

The only issue I have with this is that the .desktop-only images will appear when my phone is in landscape mode. I did try tinkering around to fix that, but ultimately I decided it wasn't that big enough of a problem for my purposes.

[kamilkrzyskow]

There is also orientation which could be used to fine tune it a bit, but now I feel like it's a bit too finicky.

Another approach could be a combination of JavaScript and CSS, like detect the userrAgent and then assign a special class which gives more information.

Initially add a .should-be-dekstop-only and .should-be-mobile-only classes, which would both use display: none.
Then in the JavaScript logic change swap out the classes to .dekstop-only or .mobile-only if the criteria is met.

There is navigator.userAgent and I found some blog post about using regex to parse the name 🤔 I'm not sure if I like this approach but it seems mroe robust than guesswork with the @media and resolution.

Reference:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript
• https://medium.com/simplejs/detect-the-users-device-type-with-a-simple-javascript-check-4fc656b735e1