Hi guys,
Please could you view http://goo.gl/IIVhFI in responsive mode - we use the Developer Tools extension in Chrome to view it at various sizes.
Generally we are happy with the way that Beaver handles responsive sizing. However at 800x600 and 1024x768 you can see the slider is huge. How can we change this so the full size slider doesn’t kick in until a higher res?
PS. This was our first client site built with Beaver 
Hey Geoff,
Have you had a chance to review the row/module mobile settings available in the advanced tab? That would be your best bet and you can also configure the break points via the tools menu while in page building mode. If those don’t help which I am assuming they will, you’ll need to write some custom css for a few media queries and target that individual row or module. Hope that helps!
Looking good BTW!
Best,
Billy
Thanks.
I’ve tried changing the break point to 1025 - but as you can see if you visit the link again and check it in responsive mode, the slider is still looking far too big on 800 and 1024 page widths. I did check out the advanced tab on both the slider (it’s a Content Slider) and on the row - but that only controls turning it off for certain sizes - we want it on for all sizes, we just want its size to remain relative - instead of jumping to full size as soon as the user gets to 800 pixel width.
Edit: Looking at the source code, it seems to be fl-slide-mobile-photo that is making the slider a sensible size on lower resolutions. How would I toggle this on 800 and 1024 (or basically < 1024) resolutions via a custom function or CSS?
Hey Geoff,
I think I know what you are after here and we think you should try the photo module instead, obviously removing padding, etc. like you did with the content slider. This will allow it to grow gradually with various screen sizes. Let me know how that goes for you!
Best,
Billy
Hi Billy,
Ok I guess we could do that. The only thing is that the current Content Slider is working perfectly by resizing automatically on smaller screens, it’s just that it resorts to using the full size image when the browser resolution hits 800px+. Under this is resolution it scales the image in much the same way I imagine the photo module would.
What dictates when the theme will display the image within the fl-slide-mobile-photo div and when it displays the original div (and therefore hides fl-slide-mobile-photo)? Is this in a function somewhere? Changing the break point to 1024 for ‘medium’ in Tools doesn’t seem to affect its behaviour.
Hi Geoff,
So, I think we would like to take a look if you don’t mind re. the breakpoint you already set and why that isn’t working the way it should. Would you mind providing temp admin access via private reply when you get a chance? We probably won’t be able to take a look until tomorrow just as an FYI. We’ll see what’s going on there and provide more info at that point.
Best,
Billy
[Content Hidden]
Hey Geoff,
The content slider and most other modules in the builder use the small breakpoint, the medium breakpoint is only used by the column settings. So that’s probably why it wasn’t working for you. However, if you do change that to 1024, your entire site will become responsive at that size, which I’m sure isn’t desired. If it is, by all means do it
You could write a media query to show fl-slide-mobile-photo on bigger devices while hiding fl-slide-bg-photo.
I would urge you to try the photo option. I’ve done that on a few sites and it works out great. Check out this homepage for reference… http://parcforetmontreux.com/
Let me know what you think.
Justin
Hi Justin,
I hear what you’re saying with regards to using a single image as a fix for this occasion, but it’s a bit of a PITA as we’ve already built the site - we assumed the slider would be as responsive as any other element. In the future we may want to have multiple images - but that’s currently not an option as the slider module is not reliably responsive. On a tablet at 800px screen width, it would be nice if the slider scaled rather than displayed in full width - the latter being a bit of a strange ‘feature’ for the theme to have.
Hey Geoff,
That’s understandable that you may want multiple images in the future.
but that’s currently not an option as the slider module is not reliably responsive. On a tablet at 800px screen width, it would be nice if the slider scaled rather than displayed in full width – the latter being a bit of a strange ‘feature’ for the theme to have.
I believe the issue is that you’re doing a slider without any text. Take a look at the responsiveness of the slider on this page, it may make more sense why we’re doing it the way we are… Associates – Beaver Builder
We couldn’t just scale the image because it’s not actually an image at all at the non-responsive size, it’s a background image. Once the slider becomes responsive, it becomes an image that sits on top of the text box.
Maybe you can try decreasing the height of the slider a bit in the settings?
Justin
Check out the site now (details in private post above). You’ll see the problem with using an image unit is that on a large desktop with a high resolution (2560px W) the image ends up being ‘cropped’ at either side. Loading a hugely wide image, i.e. 2560px >, seems bad practice.
The slider unit you have, used with a single image like we are trying to do, worked well - the only issue, as mentioned originally, is that your breakpoint at 800px W made the full size image appear.
Hey Geoff,
You can make that image go full-width on large monitors with a little CSS.
First, add a class to the module such as home-hero-image. Next, add this CSS to your theme…
.home-hero-image {
width: 100% !important;
}
Let me know if you have any questions about that.
Justin