[Resolved] Scaling in Page Hero element

Home Forums Support Scaling in Page Hero element

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #884880
    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!

    #884914
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #884967
    David
    Staff
    Customer Support

    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.

    #885046
    Björn

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

    Now to the background image…

    #885182
    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!

    #885269
    David
    Staff
    Customer Support

    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 🙂

    #885899
    Björn

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

    #885916
    David
    Staff
    Customer Support

    You’re welcome – glad to be of help.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.