topic Re: Header Module Logo not appearing in Mobile/Tablet in CMS Development

Header Module Logo not appearing in Mobile/Tablet

SAncliff — Fri, 11 Jun 2021 15:55:08 GMT

I'm trying to resolve an issue for a client at the moment where their logo is not visible in mobile/tablet view.

I suspect it is because the module styles the image as a background image (although my development skill is very limited, so I could be completely wrong here).

This is the code for the logo module:

<div class="custom-logo"> {% if module.img.override_inherited_src %} <a href="{{ module.link }}" style="background-image:url({{ module.img.src }})">Rocket </a> {{ module.logo.alt }} {% else %} <a href="{{ module.link }}" style="background-image:url({{site_settings.logo_src }})">Rocket</a> {% endif %} </div>

and this is the header group

If anyone could point me in the right direction that would be massively appreciated!

Re: Header Module Logo not appearing in Mobile/Tablet

Jake_Lett — Sat, 12 Jun 2021 14:38:08 GMT

Could you please provide a url to preview the page? The code you have looks good. If it appears on desktop but hidden on mobile there must be a media query style hiding it. You could try removing the .custom-logo class to see what that does.

Re: Header Module Logo not appearing in Mobile/Tablet

webdew — Mon, 14 Jun 2021 14:01:49 GMT

Hi @SAncliff ,

This is due to logo add in background image. We need to fix height or for more understanding what coding is it? It will be helpful if you provide me link of the website.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

Re: Header Module Logo not appearing in Mobile/Tablet

SAncliff — Mon, 14 Jun 2021 14:17:22 GMT

Hi @webdew & @Jake_Lett, thanks for looking at this for me. The site is rocket-consulting.com

Re: Header Module Logo not appearing in Mobile/Tablet

Jake_Lett — Mon, 14 Jun 2021 20:40:27 GMT

Hi @SAncliff - Your CSS stylesheet has a rule to hide the logo when the window is larger than 840px wide.

You could try the following steps:

1. Open Rocket_Consulting_July2018-style.css

2. Search for the code shown below and delete what is strikethrough. This will apply your desktop style which shows the logo image on mobile.

@media (max-width: 840px) {
~~.custom-logo a {~~
~~display: block;~~
~~font-weight: 400;~~
~~font-size: 1.0625rem;~~
~~padding: 0;~~
~~width: 75%;~~
~~line-height: 2.8125rem;~~
~~height: 2.8125rem;~~
~~color: #fff;~~
~~background-image: none !important;~~
}
}

~~@media (min-width: 841px) {~~
.custom-logo a {
display: block;
position: absolute;
width: 117px;
top: -79px;
left: -15px;
height: 62px;
margin: 54px 0 0 15px;
background-repeat: no-repeat;
background-size: cover;
font-size: 0px;
background-position: 0 -124px;
}
}

Re: Header Module Logo not appearing in Mobile/Tablet

SAncliff — Tue, 15 Jun 2021 08:48:12 GMT

Hi everyone and thanks for your help so far. HubSpot support jumped in and made the below change, which seems to have resolved the issue, copied below for if anyone else has a similar problem.

We swapped this out for a normal image instead and now it fits well on desktop and mobile: https://www.rocket-consulting.com/

We changed:

https://app.hubspot.com/design-manager/3462882/modules/5927254715/revisions/48797713166

to the following:

<div class="custom-logo">
 {% if module.img.override_inherited_src %}
 <a  href="{{ module.link }}"><img src="{{ module.img.src }}" alt="{{ module.logo.alt }}"></a>
 {% else %}
 <a href="{{ module.link }}"><img src="{{site_settings.logo_src }})"></a>
 {% endif %}
</div>

We also added some slight CSS, on line 4909 of the stylesheet to help center the image: https://app.hubspot.com/design-manager/3462882/code/5926262518

This should resolve your issue -- please let me know if you have any further questions about this!

Re: Header Module Logo not appearing in Mobile/Tablet

dennisedson — Tue, 15 Jun 2021 14:46:55 GMT

@SAncliff , Thanks for sharing!

Just an FYI, no one who is not a user in your portal will be able to open the app links.

You can do a screenshot or add a code block to show 😀