November 8, 2020 at 17:55 UTC - Views: 15 #65954scramblerModerator
The header image scales down based on its width fitting in the browser. There are other methods, but this is the easiest and the most controllable
If you want your logo to scale down on mobile, you need to give it a larger width that will trigger the scaling. In order to keep it visually the same, juts add empty content to the right of the actual logo.
This is the same as you main header image that is 1200px wide, unlike your logo image which is only 350px wide!
The width you decide on depends on when you want the image to start scaling.
If you want the image to remain the same size until the browser get to 800px wide and then scale down with the browser after that, make your image 800px wide by adding empty (transparent content) to your image using an image editor)
Your main logo image being 1200px wide, it starts scaling as soon as the browser becomes less than 1200px wide. Your logo is only 350px wide so it would only starts scaling below that which never happens. Increase its width and it will behave the same as the main header image 🙂November 8, 2020 at 22:59 UTC - Views: 6 #65968DecimusParticipant
@scrambler thanks for the detailed note. SUCCESS Yippee dancing for joy Thank you to your help.
Matched the size to 1200×200 see ringwood-dogs.com/testing/
What’s the trigger in Weaver for phone maybe I should set the feature image to that width rather than the defualt with of the header?
PeterNovember 8, 2020 at 23:26 UTC - Views: 3 #65969scramblerModerator
Tablet is 768 and phone 580, but what matters is when you feel the logo becomes too big.
Using the 350px logo, reduce your browser width slowly, and decide when the logo should start getting smaller. Then use the browser developer tools (F12) to check the browser width, and use that as the width for the image.
- You must be logged in to reply to this topic.