- This topic has 8 replies, 3 voices, and was last updated 5 months, 3 weeks ago by John.
September 17, 2022 at 11:07 am #2345997John
Does anyone know the exact dimensions for the hero image in Wordsmith? Not what will work, but the exact size. I’m trying to keep any issues I might have at making the theme my own to a minimum. Granted, I might be asking this question out of ignorance about how it really works, but I’m trying ; ) Thanks for any and all input!September 17, 2022 at 12:46 pm #2346039YingStaffCustomer Support
Does anyone know the exact dimensions for the hero image in Wordsmith?
Which hero image are you referring to?
If you are talking about the home page hero, it is the full width of your screen, so there’s no exact dimension, it varies by screen size.
Let me know!September 17, 2022 at 1:50 pm #2346097John
Thanks for the reply Ying! I’m referring to the hero image for the home page. Is there a recommended size so it renders well on all screens?
So, if I wanted to make it 2560×584 so it would be thinner, would that be ok?September 18, 2022 at 6:50 am #2346480DavidStaffCustomer Support
the original hero image is 1920 x 1280px – but that is oversized for what may be required.
Question – will you wanting the background to be responsive so 100% if the image is visible no matter the screen size ?
Adding CSS: http://docs.generatepress.com/article/adding-css/September 18, 2022 at 8:38 am #2346690John
Yes, EXACTLY! I’ve had trouble with that and saw a post reply you made.
you need to make the Page Heros aspect ratio match that of your original image.
1. Calculate your original images aspect ratio: Height / Width * 100 = Aspect Ration %.
Your example URL is: 1280 / 1920 * 100 = 67%.
2. Now you can add this CSS to make the page-hero match that ratio:
This will make it so 100% of the image is shown on any screensize.
1) where do I insert the CSS?
2) Can I constrain a hero image to only be…say 300 pixels high or is there a point where it is no longer a hero image?September 18, 2022 at 8:45 am #2346693DavidStaffCustomer Support
you can select the Container Block that the background image is assigned to and set its Spacing > Minimum Height to the aspect ratio eg.
67 vw– see here:
The thing is with restricting heights of the container is that the content inside it, eg the title may have different needs, so i would try the above method first, and then see if we need to restrict its max-height
Adding CSS: http://docs.generatepress.com/article/adding-css/September 18, 2022 at 8:49 am #2346695John
Ok, sounds good. I’ll be working on it today and will either close the ticket or ask more questions.
Thank you for your quick and detailed response!October 3, 2022 at 8:51 am #2361727DavidStaffCustomer Support
Adding CSS: http://docs.generatepress.com/article/adding-css/October 3, 2022 at 9:06 am #2361750John
Resolved – thanks again!
- You must be logged in to reply to this topic.