Slider freaking out when screen height gets smaller

Support
#1

Hi this is a super long video. Can you just tell me what I need to do here to stop the text from shrinking please?

#2

Hey there,

This is because of your Custom Grid Size setup. Please see this video tutorial to learn how it works.

Thanks.

#3

Ok I watched the video but I don’t understand how this works in regards to my slider. I want the text to stay the same size, and stay the same distance from the top, regardless of screen size.

#4

Sorry the video is just confusing to me.

#5

I’ve even hired someone on fiverr to help me with this and it still hasn’t turned out right.

#6

Can I hire you to fix it for me? I’m pretty desperate and upset about this.

#7

Or just tell me what to do and I’ll be very thankful, thanks.

Again, I need the text to behave when the screen size changes so it just looks good! Not small, and not moving around vertically all over the place.

#8

Hi,

You need to rearrange your layers on every screen/device.

2. Screen/Device

To use this option, you first have to enable a Custom Grid Size for additional screens/devices.

Toggling between the different options here will allow you to style and position your Layer content based on the selected screen/device.

For example, if you had a text-based layer, you could assign it a font-size of 64px, with a top-right position for desktop view. Then if you switch to the smartphone view, you could change the layer’s font-size to 32px, and give it a bottom-left position.

For more information, kindy refer to the link below,

https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas

Hope that helps

#9

Hi thanks. The problem is when screens are in-between the screen sizes.

For example, though I have set the font size as 24px in my paragraph for all screen sizes, on my 13" macbook air the font size is actually 19px. How can I deal with this? I want to be able to make it 24px at all sizes, except maybe mobile.

Thanks

#10

Hi there,

It’s because of responsive scaling. Fonts and other elements will appear differently depending on screen’s size.

Your original slider is 1700px width + full-screen setting, and a 13" MacBook Air has only 1360px screen resolution. So the slider will try to scale down from 1700px to 1360px (that includes the sizes of elements relative to scaled down container).

In my personal experience, targeting the smallest device is much better approach than going big. That’s because displaying a small slider to a big screen has no issues since it could scale up with no change in elements sizes (no overlapping). But, with big slider displaying to the smaller screen will always scale down, and it will scale down the elements to prevent overlapping. (as clarification, it’s not about small images, you can still use big images in a small slider, what I’m referring is the size of the grid).

Thanks!

#11

Hey this is very close! I only find that the paragraph text is a bit small at mobile width. How could that be improved?

Thank you very much for your help!

#12

Hi again. How do I edit this slide?

I can’t scroll down to edit the bottom of the slide. See my screen shot in secure note. Thanks

#13

Hi there,

You can use the custom grid this time, and target the small size then arrange your elements for that size. Like from the reply by @paul.r, check the provided URL and screenshot.

Then make sure you fit your slider layers on that device size.

About the scrolling, you can’t since it’s the limit of your grid size. You should drag your layer up a bit, or change its size.

Thanks.