topic Re: Logo on landing pages gets cut off on mobile in Blog, Website & Page Publishing

Logo on landing pages gets cut off on mobile

maroni — Thu, 06 Oct 2022 07:59:09 GMT

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

Re: Logo on landing pages gets cut off on mobile

Ben_M — Thu, 06 Oct 2022 13:33:24 GMT

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.

Re: Logo on landing pages gets cut off on mobile

NeerajTrikha — Fri, 07 Oct 2022 05:53:25 GMT

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.

Re: Logo on landing pages gets cut off on mobile

Ben_M — Fri, 07 Oct 2022 12:57:37 GMT

@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-packs ).

Re: Logo on landing pages gets cut off on mobile

NeerajTrikha — Fri, 07 Oct 2022 14:08:46 GMT

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

Re: Logo on landing pages gets cut off on mobile

maroni — Thu, 13 Oct 2022 10:10:36 GMT

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!

Re: Logo on landing pages gets cut off on mobile

maroni — Thu, 13 Oct 2022 10:25:01 GMT

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

Re: Logo on landing pages gets cut off on mobile

Ben_M — Thu, 13 Oct 2022 12:40:45 GMT

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.

Re: Logo on landing pages gets cut off on mobile

maroni — Thu, 13 Oct 2022 13:21:59 GMT

Awesome, that worked, thanks a ton @Ben_M !