GDHide a Background Image in Mobile View
Can anyone help me with something. I have a added a background image to a table which I want to hide on a mobile device.
Here's what I have currently (I've added red lines where I have cut the image and created seperate table objects) :
For the desktop version I want everything to display (and have created an image background that is a white fade over the main image).
For the mobile version I am hiding images 2, 3 and 4 (using a display:none media query) so that the text box sits below the top main image (which is set with a 100% width class).
I can't figure out how to add a background image to a cell and apply a "nomobile" class to just the background image - I want the background image to vanish and just leave a white background to the copy block but if I add the "nomobile" class to the call then it all vanishes.
Ideally, the mobile version would then display like this:
Any ideas?
It's been awhile since I tried using background images but order is important here. Is the background image listed first and the "nomobile" class listed second?
Sharing you code would help.
Nicole,
The media queries I'm using are:
And I've placed the image and text in this:
Of course, if I place a "nomobile" class on the background image it applies it to the whole table and that vanishes:
Any ideas? I haven't used background images in such a long time that I've never used them responsively so am coming unhinged.
Have you tried
background: none !important; ?
Thanks James. I never even considered creating a new class as was trying to do it was table attributes.
Very much appreciated!