I have a home page using BB that has a set of 3 callout modules with an image in each.
What I would like to do is to swap out that image at a certain media query breakpoint via CSS. Specifically, on smaller mobile devices in portrait mode, I would like to have a different image in the callout.
I’m using DWB so adding the correct CSS to the required location is not an issue, it’s just wrapping my head around which selector/class/etc. to use and what to put into it (not really a background URL sort of thing - is it?).
Normally, the images point to the right. What I am looking for is to swap out those right-pointing images with ones that point down (to the callout content) on mobile devices with a narrow screen.
Not a major thing, just a ‘nice to have’ and also to expand my knowledge on the abilities of BB
The only way I can think of is by creating 2 sets of rows with the same callout modules, but different images. One with the images for small devices, and the other for normal devices. We can then hide the ‘small devices row’ on normal devices and show them on small devices. Reverse for the other row, show them on normal devices and hide them on small devices.
I had no idea that it would be so easy to do as Ben suggested. Just make a duplicate row with the required images and then set the Row settings to Small devices only! Too easy!
Note that I set the original row to Large and Medium devices as well.
