[Resolved] Scaling in Page Hero element

[Björn]

Hi!

I’d like to get rid of my “Slider Revolution” plugin because it is too complex for my needs and I’d like to save a bit on the number of installed plugins.

So I’m trying to rebuild what I have already made with “Slider Revolution”.

https://shop.classicalatelierathome.com/

The top image is my attempt doing it with the Page Hero element. The one below is the Slider Revolution slider as reference (buttons still not satisfying).

I’d like to have the Page Hero element scaling the same way as the Slider Revolution thing – but I can’t make this to work. On mobile view the reference is an exact representation of the full screen version. But the Page Hero element crops the image and does not scale the text.

This is the input:

<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Merriweather');
</style>
<p style="font-family: 'Dancing Script', cursive; font-size:2em; margin-bottom:1px;"> The Only True Shop for your classical art!</p>
<p style="font-family: 'Merriweather', serif; font-size:3em; line-height:1.4em;"> Find everything you need <br />
  for your ARTelier! </p>
  <button>SHOP</button>

Custom Image
Padding: 15%, –, 20%, 30%
Background position: left top

Thank you for your help!

[Tom]

Hi there,

It looks like RS is using javascript to scale the image like that.

I’m not sure if it’s possible without, but I’ve asked David if there’s some special CSS we can use.

Will let you know 🙂

[David]

Hi there,

so the trick is to make the type scale responsively. We can do this by using VW (viewport width) units for the font size. To test it change the Dancing script font-size to:

font-size: 2.5vw;

and the Merrieweather to

font-size: 4.3vw;

This should keep its aspect ratio proportionate as the header resizes.

That should get you ( us ) started.

[Björn]

Works like charm! 🙂
The good thing with not using slider Revolution is it keeps the type crisp.

Now to the background image…

[Björn]

BTW: I have disabeled the bottom one to not confuse visitors. Or do you need to see it in order to help me scaling the background image as desired?

Thank you for your support! You all are great! And the theme is great too!

[David]

From what i recall the rev slider background image as slightly cropped top and bottom. Try setting the header elements top and bottom padding to 10% each. Looks pretty similar to me 🙂

[Björn]

Good enough.
Thank you for this extraordinary support and theme!

[David]

You’re welcome – glad to be of help.

[Author]

Posts