In order to get my client’s homepage to display as they wanted, I resorted to serving different images (not just different resolution, but a different aspect ratio also) on mobile vs desktop. In beaver builder, I set the desktop image as the row background, and then in custom css (developed locally and served as part of styles.css) I swap the images. In total, three different images are served, depending upon the device.
Because of the different images served, the location of an overlay box call to action is also different. I wasn’t able to achieve what I wanted using the css editor for the page only within beaver builder (media queries don’t seem to work). The client now wants to be able to more easily run regular and/or seasonal promotions, and advertise these on the homepage, without my help.
Is there a better way to organise things so that what he sees in beaver builder is an accurate representation of what the page will look like on different devices? I previously came across a a plugin that added the ability to serve a different image on mobile, but it only only allowed one breakpoint. Can media queries be simulated somehow in beaver builder?