Dealing Responsive Hero Images

Beaver Builder
1

Hi,

I have to sites that I’m working on at the moment that I am having trouble with the hero image

http://school-essentials.uk/
http://pillgwenllyprimary.org/

When I view them on my iPad & iPhone the hero images don’t look great, is there a way to deal with this so even if they are zoomed in you could position them the way you like? I am using the parallax setting…

Many thanks

2

Hey Susanna,

Are you using the latest version of the plugin 1.5.9? That included a fix for an issue with IOS devices. If you already are, then you may need to add custom CSS to adjust the background on smaller devices. You can use media queries to achieve that.

Hope this helps!

Ben

3

Hi Susanna,
as Ben said Media Queries is the answer. You should have as many different sizes of your image in your media library as you have breakpoints and then load the proper image version with a Media Query for the device. Don’t just resize the large image with CSS. This technique produces high load times and abandon rates on mobile devices. Consider to take the hero image out on small devices because it doesn’t make sense in most cases.

Hope this helps,
Leo

4

Would something like the RICG plugin work (https://wordpress.org/plugins/ricg-responsive-images/)?

Would you guys think about implementing something like Aqua Resizer?

This question is actually something that many people I know have been struggling with - there’s even a post in the Beaver Builder FB page today about it.

The ideal I think many of us are going for is something like this site, where the images resize smoothly according to the browser/device width:

http://www.awwwards.com/web-design-awards/edwin-europe

What say you, BB team? Is this ever something we could get built in to BB? Should I start a feature request for it?

5

Hey Keith,

Appreciate the feedback and suggestions. Honestly, hard to say on if we will do anything in that arena. After all, our focus is on the WP page builder market so I would ebb on the doubtful side unfortunately.

I can totally appreciate how something like that would be really useful, but as you mention, there are already tools out there for it if really needed. Media queries are always an option too as Leo mentions.

Anyway, we are keen to sticking to our core focus which is Beaver Builder for now, but who’s to say we don’t create more products down the line! :slight_smile:

Best,
Billy

6

But yea, feel free to add it in User Voice if you like. We’ll certainly discuss at some point.

Best,
Billy

7

Hey Keith,

I’d just like to chime in here. The site you posted above uses the image not as a background but by using the img tag. In that case, you can use our Photo module and you will notice it resizes accordingly.

The problem with this post, as well as the post on FB I would assume, is the image is being used as a CSS image background. In that case, the image(or background) would depend on the dimensions of its content, not on the size of the device it is being viewed on.

Hope this makes sense.

Ben