Logo on landing pages gets cut off on mobile

[maroni]

Hi all, 

The logo in our global header gets cut off on landing pages when viewed on mobile devices. This is despite Hubspot preview and Google Inspect showing it fully. Any ideas how to fix this? Thanks!

Hubspot preview

Hubspot preview

Google inspect:

Google inspect

Reality:

Reality

[Ben_M · Accepted solution]

---

@NeerajTrikha wrote:

Hi @Ben_M ,

While I second your thoughts about Looking at the code and validating it, However don't you think, the preivew should show more realistic picture. And if that has something to do with the Paid plan or not, the preview would/should show up accordingly. 

Please feel free to educate me in case I am thinking wrong. 

---

Unfortunately previewing can only provide an estimation and actual testing is usually needed for the first time trying to send out templates. Having worked in web/email design for quite awhile these are pain points not only felt by automation tools,  but by code development tools like Dreamweaver as well.

My comment on the paid plan was because on the forums we don't have insights into what someone is using and often I come across posts with people on the free plan who have very limited editing capabilities or have downloaded a free template. In some of those instances they end up being stuck with no ability to edit the code needed to fix the problem. As such, the recommendation would be to switch to another template. This is a known issue in the Hubspot ecosystem as they shut down and stopped accepted new submissions last year until they launched a new marketplace just the other month in an effort to try and fix these situations ( https://developers.hubspot.com/changelog/asset-marketplace-updates-on-modules-templates-template-pac... ).  

[NeerajTrikha]

Thanks @Ben_M , this developer changelog article was a really helpful!!  

[Ben_M]

Impossible to tell without seeing the code.  Can you please share a link to the page in question?  Also can you confirm you are on a paid plan with accesss to the source code?  If not, your options for resolution may be limited based on the free template being used and you may either need to re-work your logo to work on the page or contact the designer of the template.

[maroni]

And here's the what I believe to be the code from design tool: 

      {% module "header_logo" path="@hubspot/logo", label="Header Logo", link="https://vamp.com/", img={src="{{logo_file}}", width="160", alt="vamp-logo-colour-2021" override_inherited_src=true} %}

I've tried adding height="100% !important" and removing the width without success. 

Thanks for your help! 

-Matthias

[maroni]

Thanks @Ben_M for your help here! 

This is a sample LP that uses the common template. And yes, we are on a paid account with access to the source. Appreciate your help!

[Ben_M · Accepted solution]

The issue is in your main.css file.  Look for the class .header__logo and remove the float and height attributes.  Also look for .header__logo img and remove the top -50% attribute.  These likely have to do with the original logo that was used in the template you received. But with the dimensions of your logo those values can be safely removed solving your issue.

[maroni]

Awesome, that worked, thanks a ton @Ben_M !

[NeerajTrikha]

Hi @Ben_M ,

While I second your thoughts about Looking at the code and validating it, However don't you think, the preivew should show more realistic picture. And if that has something to do with the Paid plan or not, the preview would/should show up accordingly. 

Please feel free to educate me in case I am thinking wrong. 

[Ben_M · Accepted solution]

---

@NeerajTrikha wrote:

Hi @Ben_M ,

While I second your thoughts about Looking at the code and validating it, However don't you think, the preivew should show more realistic picture. And if that has something to do with the Paid plan or not, the preview would/should show up accordingly. 

Please feel free to educate me in case I am thinking wrong. 

---

Unfortunately previewing can only provide an estimation and actual testing is usually needed for the first time trying to send out templates. Having worked in web/email design for quite awhile these are pain points not only felt by automation tools,  but by code development tools like Dreamweaver as well.

My comment on the paid plan was because on the forums we don't have insights into what someone is using and often I come across posts with people on the free plan who have very limited editing capabilities or have downloaded a free template. In some of those instances they end up being stuck with no ability to edit the code needed to fix the problem. As such, the recommendation would be to switch to another template. This is a known issue in the Hubspot ecosystem as they shut down and stopped accepted new submissions last year until they launched a new marketplace just the other month in an effort to try and fix these situations ( https://developers.hubspot.com/changelog/asset-marketplace-updates-on-modules-templates-template-pac... ).