- This topic has 4 replies, 2 voices, and was last updated 1 year ago by
Tim.
-
AuthorPosts
-
March 22, 2020 at 6:15 pm #1206672
Tim
Hello
When viewing the logo at different viewport widths, it does not scale proportionately with the size of the Site Title.
More specifically this appears to be an issue I can only produce on mobile width in Chrome DevTools, where the tagline jumps from single line to multiple lines, which in turn forces the logo to scale smaller.
What might be the best practice for dealing with this situation ?
Thanks
Tim
March 23, 2020 at 3:54 am #1207151David
StaffCustomer SupportHi there,
try this CSS to restrict the logo container to a minimum width:
.site-branding-container .site-logo { min-width: 60px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 24, 2020 at 3:00 am #1208147Tim
Hi David
Thanks that did help.
Though in the horizontal orientation, the logo is larger than Site Title + Tagline.
It would be ideal to lock the logo’s height to that of the 2 text elements.
March 24, 2020 at 4:25 am #1208213David
StaffCustomer SupportWithout using JS – which wouldn’t be a good solution – there isn’t a magic fix to sizing the logo to match the height of the text elements.
If it helps on the larger screen sizes the height of the title/tag-line is 58px, which you can adjust the logo size and the above CSS to suit.
On the smaller screens where the title/tag-line wrap to new lines it increases to 80px. And you can if you wish use this CSS to adjust the logo to suit:
@media (max-width: 492px) { .site-header .header-image { width: 80px; } .site-branding-container .site-logo { min-width: 80px !important; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 24, 2020 at 10:27 pm #1209141Tim
Hi David
Using the code:
@media (max-width: 492px) { .site-header .header-image { width: 80px; } .site-branding-container .site-logo { min-width: 80px !important; } }
On a large width (960px), if I measure the pixels from the top of the R in the Site Title, to the bottom of the p in the Tagline I get
76px
For medium width, iPad (768px) I get
64px
For small width, iPhone 6 (375px) which has the Tagline running into 2 lines, I get
88px
In all cases the square logo image does not appear to be the same height as the Site Title + Tagline.
Is there perhaps an alternative method for getting this height ?
Or perhaps if the logo was just the same height as the Site Title that would make it easier, inline perhaps.
-
AuthorPosts
- You must be logged in to reply to this topic.