0

Thanks in advance for your help!

We use a CMS platform that doesn't display images very well on mobile and would like to hide them, as they are too big to show there (the images contain text which is not readable at that size).

Is there a way to target these images using JS and hide them on mobile only? We don't want to hide all images - only certain banner images within certain aspect ratios. For example all images with height between 100-150 and width between 800-1200?

EDIT: Here are a few mockups to better illustrate the problem:

Desktop Mockup

Mobile Mockup

As you can see, the banner renders on desktop as expected. On mobile, the image banner text is too small for it to be readable. I would like to remove the image banner from mobiles, but cannot target just the banners via CSS as it would affect other images as well.

I have thought about trying to target images within a certain aspect ratio (height between 100-150 and width between 800-1200) and hide them via JS, but it hasn't worked so far. I have tried using the following script too (which targets exact dimensions) but no luck:

 $('img').each(function() {
    'use strict';
    var img = $(this);

    if (img.width() === 600 && img.height() === 120) {
      img.hide();
    }
  });

Thank you!

Radio19
  • 1
  • 1

1 Answers1

0

If you want to target the device width and height, you can use the CSS media query to do it. A similar post can be found in here.

EDIT: The answer above is irrelevant to question.

Community
  • 1
  • 1
He Wang
  • 647
  • 7
  • 19
  • that would target all img classes - I only need to target images with a certain aspect ratio - height between 100-150 and width between 800-1200 - please see edit above along with mockups. Thanks for your help! – Radio19 Mar 19 '19 at 02:36
  • @Radio19 hey mate, it seems like I totally misunderstood your question, I am sorry. I think your script should work, can you please provide some HTML markup? – He Wang Mar 19 '19 at 03:35