Behavior = None but image still shows

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 4 years, 5 months ago.

Author Posts

experientdesign

I’m using the Behavior feature to display different images for desktop and phone. All views work except for Large Desktop. Even though the variable is set to “None”, both desktop and mobile images appear when viewing on a Large Desktop Setting. All other views work as they are set.

Any help is appreciated.


Sebastian

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


experientdesign

Here’s the URL:

http://devnascate.experientdesign.com/

Thanks so much for looking at this and the quick response!


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


experientdesign

I used option 2 and it worked! Thanks so much!


Sebastian

Great!

You must login or register to reply to this topic.