CMS Development

MaddyForeman
Membre

Issues with Logo on Mobile

Hi there, on mobile the logo on our blog ends up losing the aspect ration and the size ends up really wonky. We have tried a lot and nothing has changed. 

 

https://info.expeditors.com/featured 

 

Thank you! 

0 Votes
5 Réponses
DanielSanchez
Conseiller clé | Partenaire solutions Platinum
Conseiller clé | Partenaire solutions Platinum

Issues with Logo on Mobile

Hi MaddyForeman,

 

I change this CSS in Inspect Element:

 

@media (max-width: 991px)
.custom-logo img {
    width: 177px!important;
    min-width: inherit;
}

.span4.widget-span.widget-type-rich_text.custom-logo p {
    margin: 0px;
}
}

And it worked. Look:

css-logo-mobile.PNG

 

 

Now, you need try this changes in your CSS.

 

Hope this helps.

Kevin-C
Expert reconnu | Partenaire solutions
Expert reconnu | Partenaire solutions

Issues with Logo on Mobile

Hey @MaddyForeman 

 

After inspecting the site, it looks like you've got 2 width properties being set on the logo that is being deisplayed on mobile. See below in red:

Screeenshot - 2019-11-15 at 8.43.35 AM.png

Now how those got there I cannot speak to accurately, but…

Judging by the HTML structure it looks like the image is being added to the page via a Rich-Text module, and this is possibly why HS adds theses parameters (assuming it wasnt set in another way). See structure below:

Screeenshot - 2019-11-15 at 8.43.19 AM.png

I've highlighted a few pieces that might help you identify the culprit in the drag and drop editor.

  • The "custom-logo" class might be add in the drag and drop editor itself.
  • The "hs_cos_wrapper_type_rich_text" class kind of obviously tells us the module type
Kevin Cornett - Sr. Solutions Architect @ BridgeRev
natsumimori
Gestionnaire de communauté
Gestionnaire de communauté

Issues with Logo on Mobile

Hi @MaddyForeman ,

 

Thank you for reaching out to HubSpot Community.

 

Could you provide some more details for the Community to help you here?

  1. Could you attach a screenshot and specify the issue of your logo image? (i.e point out the area you want to fix)
  2. How would you like to modify the logo?

Thank you,

Natsumi

0 Votes
MaddyForeman
Membre

Issues with Logo on Mobile

 

File.jpg

 

 

Here is a screenshot of the issues we are having. I would just like the logo to maintain the aspect ratio and not become distorted on mobile. We have played with the aspect ratio and sizing of the logo, but nothing changes on the mobile side. 

0 Votes
natsumimori
Gestionnaire de communauté
Gestionnaire de communauté

Issues with Logo on Mobile

Thank you @MaddyForeman for the screenshot.

I will ping @Stephanie-OG and @AJLaPorte_diagr here. I've seen they shared great knowlege around design queries, so they might have some advice for you.

 

Natsumi

0 Votes