- This topic has 7 replies, 3 voices, and was last updated 5 years ago by David.
-
AuthorPosts
-
April 30, 2019 at 2:38 pm #884880Bjö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 topThank you for your help!
April 30, 2019 at 3:32 pm #884914TomLead DeveloperLead DeveloperHi 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 🙂
April 30, 2019 at 5:00 pm #884967DavidStaffCustomer SupportHi 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.
April 30, 2019 at 7:48 pm #885046BjörnWorks 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örnBTW: 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 SupportFrom 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 🙂
May 1, 2019 at 12:46 pm #885899BjörnGood enough.
Thank you for this extraordinary support and theme!May 1, 2019 at 1:28 pm #885916DavidStaffCustomer SupportYou’re welcome – glad to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.