- This topic has 17 replies, 3 voices, and was last updated 1 year, 4 months ago by
Leo.
-
AuthorPosts
-
October 28, 2020 at 12:07 pm #1508402
Anders Nielsen
Hi
Lighthouse is giving a warning about height and width are not set for the logo.
I have tried setting a css for the logo:
.site-header .header-image { height: 42px!important; width:200px!important; } img.header-image.is-logo-image { height: 42px!important; width:200px!important; }
But the warning is still there.. Any chance you can help β making the settings correct?
This is my site: Angst.dk
October 28, 2020 at 12:10 pm #1508408Leo
StaffCustomer SupportHi there,
GP sets the width by default using the width slider in the customizer and set the height to auto.
I really don’t think you need to worry about that warning.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 28, 2020 at 12:13 pm #1508413Anders Nielsen
Hi Leo
I understand… but I would still like to fix it, as it gives a small penalty to Cumulative Layout Shift.
I know it’s a small thing, but creating a full 100 all lighthouse – is some kinda cool π
This is my site: Angst.dk
October 28, 2020 at 12:20 pm #1508419Leo
StaffCustomer SupportHmm I’m not sure unfortunately.
I can see that your CSS is indeed working:
https://www.screencast.com/t/2KGnLyvAtNot really sure why Lighthouse is not reading it.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 28, 2020 at 11:35 pm #1508824Anders Nielsen
Lighthouse is not reading the css , as the widht and height are added to the HTML, and the values are emthy.
<img class="header-image is-logo-image" alt="alt" src="/wp-content/uploads/logo.svg" title="title" width="" height="">
I changed my logo to a png file – and the error was gone.
Could this be a small bug in the costumizer, when using SVG as a logo file?
This is my site: Angst.dk
October 29, 2020 at 2:56 am #1508957David
StaffCustomer SupportHi there,
GP uses the
wp_get_attachment_metadata
to output the Width and Height attributes of the logo.
If you go to your Media Library and select the SVG logo – does the images Attachment details display the Width and Height attributes ?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2020 at 9:25 am #1509850Anders Nielsen
October 29, 2020 at 10:31 am #1509927David
StaffCustomer SupportIf the width and height is missing from those details then it means the SVG is saved without those sizes in its viewbox.
But if PNG is working for you then thats good π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 1, 2020 at 1:01 am #1513112Anders Nielsen
Hi David
Now I get a lighthouse warning about the .png logo to set widht and height?
“Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn more”
I use autoptimize β and have disabled the logo from lazyload.
Do you have any idea what I can do to remove this warning?
This is my site: Angst.dk
November 1, 2020 at 7:43 am #1513383David
StaffCustomer SupportHi there,
that will be the Mobile Header logo, which we don’t set a width and height attribute, as its size is defined by the Menu Item Height. As its space is defined by the Menu it won’t cause and CLS issues, whereas setting a height may do. The warning can be ignored.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 2, 2021 at 12:32 am #1642498Anders Nielsen
February 2, 2021 at 6:35 am #1642879David
StaffCustomer SupportHi there,
i provide a PHP Snippet here that allows you to set width/height attributes:
https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234
The Site Header / Nav system is up for review, so we’ll take this into account when we look at updating the nav.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 2, 2021 at 8:27 am #1643160Anders Nielsen
Hi David
Thanks it solves the issue for the mobile header… Do you have a snippet for the desktop header logo too?
img.header-image.is-logo-image
This is my site: Angst.dk
February 2, 2021 at 11:30 am #1643349Leo
StaffCustomer SupportTry this:
https://generatepress.com/forums/topic/svg-causing-cls-movement/#post-1545284Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 2, 2021 at 11:39 am #1643353Anders Nielsen
-
AuthorPosts
- You must be logged in to reply to this topic.