Behavior = None but image still shows

Tagged: ,

Author Posts

experientdesign May 3, 2018 at 9:25 pm

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 May 4, 2018 at 8:58 am

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 May 4, 2018 at 12:05 pm

Here’s the URL:

http://devnascate.experientdesign.com/

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

Sebastian May 4, 2018 at 1:40 pm

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 May 4, 2018 at 2:50 pm

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

Sebastian May 4, 2018 at 3:14 pm

Great!

You must login or register to reply to this topic.