[Resolved] Problem with logo size

[Victor]

Hello, I have the web https://expertomascotas.com/ with tour theme and with Thrive Architect.

The web worked perfectly, but suddenly the size of the logo has changed. Before the wide was 610 pixels (is the perfect size for me), and I configured in the Thrive Arquitect options.

That size continues being the same in Thrive, but now the size of the logo is 860 pixels wide in all my urls. I wrote to Thrive Architect and appears that the problem is relationed with the theme (Generate Press), I attach you the answer:

“I’ve managed to check your dashboard and the Header style/ Logo size is being set by your GeneratePress theme CSS files:

https://share.getcloudapp.com/OAuPqkE7

Although I can see that the logo is set to 610px:https://share.getcloudapp.com/6qu8ejWY, on the frontend it will still show as 860px wide:https://share.getcloudapp.com/z8u6ZyXw.

This is why I will recommend reaching out to GeneratePress support to advise you accordingly since we do not have any control over this section within our Thrive Architect editor.

They know how their code is being used and they could advise you in this matter.”

Please, could you help me? I don’t know why the logo size has changed and I don’t know hot to modify again.

Thanks. I have created you and temporary user.

[Elvin]

Hi there,

I’ve checked your site and it looks like the images are being managed by a plugin. Are you using image optimization plugins? the DOM change applied looked similar to what Perfmatters do.

Can you try disabling all plugins except GP premium and Thrive architect and see if it still occurs? Let us know.

[Victor]

Hello,

Yes, I manage the images with the plugin “Imagify”, and I have checked that if I disable this plugin the logo comes back to 610 pixels. But I use this plugin in other webs and I have no problems.

Why is changing the size of the logo? (all the other images are the right size). How can I change the size again to 610 px? (I want to continue using this plugin).

Thanks.

[David]

Hi there,

can you go to Customizer > General and change the Structure to Flexbox. This newer part of the theme will ensure the Site Logo has the correct dimensions – which may fix the issue.

[Victor]

Hello David!

I have just made the modification that you say, choosing “Flexbox” in the structure, and as you can see, the logo continues with the same wrong size. (I have erased the cache memory and the CDN cahe memory).

Please, can you help me?

[David]

Its going to require some CSS as the webP plugin you’re using is changing the images HTML

.site-logo img {
     max-width: 610px;
}
.inside-header {
    justify-content: center;
}

[Victor]

Perfect David, now it works good. Thanks!

[David]

Glad to hear that!

[Victor]

Sorry David, but the problem is not solved at all.

I have seen that in the mobile version the logo appears veru very big totally out of his area, I can not send you an image attached. I suppose in tablet version also happens the same problem.

I suppose I have to add the CSS code modified, is true?

Please, help me to solve this problem.

Thanks.

[Ying]

Hi Victor,

Try modify the CSS to this, so that the CSS only apply to screen width wider than 1024px.

@media (min-width: 1024px) {
    .site-logo img {
        max-width: 610px;
}
    .inside-header {
        justify-content: center;
    }
}

[Victor]

Sorry Ying,

If i add this code, the error in the mobile continues.

And if I replace for the code of David, then the error in the desktop mobile returns.

Wait for your answer.

[David]

Remove all of this CSS:

.site-logo img {
     max-width: 610px;
}
.inside-header {
    justify-content: center;
}

@media (min-width: 1024px) {
    .site-logo img {
        max-width: 610px;
}
    .inside-header {
        justify-content: center;
    }
}

and add just this:

@media (min-width: 690px) {
  .site-logo img {
    max-width: 610px;
  }

  .inside-header {
    justify-content: center;
  }
}

[Victor]

Now it works good on all devices 😉

Thanks David!!

[David]

Glad to be of help!

[Victor]

Hi David! I have had the same problem in another of my websites, https://madridobrasyreformas.com/.

In appearance options I had 340px size for the logo, but suddenly the size of the logo was bigger.

I have add the same code in this web, with a size for the logo of 365px:

@media (min-width: 365px) {
.site-logo img {
max-width: 365px;
}

.inside-header {
justify-content: center;
}
}

It works good in all URLs, but not in the mobile version in the home, here the logo appears wrong.

Please, could you help me?

Thanks!

[Author]

Posts