Issues with Logo on Mobile

Highlighted
New Contributor

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! 

Reply
0 Upvotes
5 Replies 5
Community Manager

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

Reply
0 Upvotes
New Contributor

 

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. 

Reply
0 Upvotes
Community Manager

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

Reply
0 Upvotes
Advisor

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
Esteemed Contributor | Platinum Partner

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.

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/