#136412 Explicit width and height for logo

Landing Forums JupiterX WordPress Theme Explicit width and height for logo

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Artak Arzumanyan

    Hi.

    Is there a way do set explicit width and height for logo in header?
    Inside raven-site-logo there is a.raven-site-logo-link with logo inside. In my case it is SVG image. Since it is causing a little LCP I want to fix this.
    I need something like code snippet for functions.php for both mobile and desktop logos (same file different sizes).

    Thank you

    Amir Rather Support Team

    Hi there!

    In the Site Logo Widget there are Width and Height options in the Style Tab https://themes.artbees.net/docs/site-logo-element/

    Did you try those?

    Regards

    Artak Arzumanyan

    Hi

    I am using that widget. But unfortunately it has only width and maxwidth and no height. Moreover, maybe I am wrong, but for fighting LCP I need to have width and height applied to the img element and not in CSS. I found snippet for functions.php but it is for different theme I assume

    add_filter( 'generate_logo_attributes', function($array){
    $img_attr = array('width' => '200px', 'height' => '200x',);
    return array_merge($array, $img_attr);
    },15,1);

    Is there something like that I can use with JupiterX?

    Mohsin Al-Rabieai Support Team

    Hi Artak,

    You can still set a different width for the logo on different devices. Please note that, if you change the height of an SVG image, the width of it will also change accordingly. If you change the width, the height will also change. However, using @media CSS queries, it’s possible to add different heights and widths for any part of a page. Please just share the page link containing your logo so we write you a proper CSS fix with the @media query.

    —-

    If this is an LCP issue, I strongly recommend you take a look at the optimization articles on the blog section. Using WP Rocket, Autoptimize, or Fastest Cache plugins you can reduce the LCP as much as possible. You may also want to avoid using Lazy load for good because it may cause the LCP:

    https://stackoverflow.com/a/63967367/376851

    Bests

    Nodari Support Team

    Reply from Arthak I deleted accidentally

    Hi.

    I am using Litespeed cache among with few other plugins and manual optimization trick, so overall my WordPress is very fast. Just want to fix minor issues.

    Regarding to my issue: Just found few new templates (like https://jupiterx.artbees.net/health/) which are not using “site logo” + “Navigation menu” combination , but something bootstrap-like … jupiterx-site-navbar navbar, jupiterx-navbar-brand, container etc … Is this something new? What it that widget ? This layout might help me to fix last PSI issue 🙂

    Nodari Support Team

    Hi Artak

    The example you posted in your last message does not use a custom header, it has a default header and that’s the reason why its different,

    other ideas

    1. Instead of the logo widget try to use the image widget of Elementor, (Or any other image widget) that has the option to add width and height values
    2. you may also use an HTML widget and pure HTML image tags inside with predefined height, width, or anything else

    Hope this helps 🙂

    Artak Arzumanyan

    Thank you, Nodari

    I’ll try other widget as you suggested.

    Regards

    Artak

    Amir Rather Support Team

    Most Welcome 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.
Login