CMS Development

SAncliff
Participant | Diamond Partner
Participant | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE

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

SAncliff_0-1623426849055.png

 


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

0 Upvotes
1 Accepted solution
SAncliff
Solution
Participant | Diamond Partner
Participant | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE

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!

View solution in original post

6 Replies 6
SAncliff
Solution
Participant | Diamond Partner
Participant | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE

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!

dennisedson
HubSpot Product Team
HubSpot Product Team

Header Module Logo not appearing in Mobile/Tablet

SOLVE

@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 😀

0 Upvotes
Jake_Lett
Guide | Partner
Guide | Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE

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;
}
}

 

 

SAncliff
Participant | Diamond Partner
Participant | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE

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

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE

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. 

 


Jake_Lett
Guide | Partner
Guide | Partner

Header Module Logo not appearing in Mobile/Tablet

SOLVE
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.