Behavior = None but image still shows

Hey, could you please post a link to your page with the images so I can inspect the CSS?

It sounds like something might be overriding your display:none setting for Large Desktop, but I’ll know more once I’ve viewed the page.

Thanks,
Sebastian

Thanks for the link. The issue is that there is a missing range which MT’s default media queries don’t cover (978px – 1199px).

If you look at the shading on the top ruler, you can see the scope of the media query for a given tab. The Large Desktop media query only applies to screen widths of 1200px or wider. And so your display:none rule only kicks in at that point.

Here the ranges for the media queries you used.

Large Desktop: @media (min-width: 1200px)
Desktop & Tablet: @media (min-width: 768px) and (max-width: 979px)
Tablet & Phone: @media (max-width: 767px)

There are a couple of ways you could solve this.

Option 1

1. Set the image for mobile to display:none on the All Devices tab. And display:inline on the Tablet & Phone tab
2. Set the image large screens to display:none on the Tablet & Phone tab.
3. So the mobile image is hidden by default, but that will be overridden by the display:inline rule that kicks in on screen sizes up to 767px

Option 2
You could edit the media queries, adding a new Desktop tab with @media (min-width: 980px). And apply your display:none value to that instead of the Large Desktop media query. You can edit media queries using the option to the left of the responsive tabs.

I hope my explanation make sense. Please let me know if you need more advice.

Thanks!
Sebastian

Great!