- This topic has 7 replies, 3 voices, and was last updated 1 year, 11 months ago by David.
April 30, 2019 at 2:38 pm #884880Björn
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”.
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>
Padding: 15%, –, 20%, 30%
Background position: left top
Thank you for your help!April 30, 2019 at 3:32 pm #884914TomLead DeveloperLead Developer
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 🙂April 30, 2019 at 5:00 pm #884967DavidStaffCustomer Support
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:
and the Merrieweather to
This should keep its aspect ratio proportionate as the header resizes.
That should get you ( us ) started.April 30, 2019 at 7:48 pm #885046Björn
Works like charm! 🙂
The good thing with not using slider Revolution is it keeps the type crisp.
Now to the background image…May 1, 2019 at 12:49 am #885182Bjö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!May 1, 2019 at 2:54 am #885269DavidStaffCustomer SupportMay 1, 2019 at 12:46 pm #885899Björn
Thank you for this extraordinary support and theme!May 1, 2019 at 1:28 pm #885916
- You must be logged in to reply to this topic.