CMS Development

SAncliff
Teilnehmer/-in | Diamond Partner
Teilnehmer/-in | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

lösung

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 Akzeptierte Lösung
SAncliff
Lösung
Teilnehmer/-in | Diamond Partner
Teilnehmer/-in | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

lösung

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!

Lösung in ursprünglichem Beitrag anzeigen

6 Antworten
SAncliff
Lösung
Teilnehmer/-in | Diamond Partner
Teilnehmer/-in | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

lösung

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-Produktteam
HubSpot-Produktteam

Header Module Logo not appearing in Mobile/Tablet

lösung

@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
Ratgeber/-in | Partner
Ratgeber/-in | Partner

Header Module Logo not appearing in Mobile/Tablet

lösung

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
Teilnehmer/-in | Diamond Partner
Teilnehmer/-in | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

lösung

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

0 Upvotes
webdew
Ratgeber/-in | Diamond Partner
Ratgeber/-in | Diamond Partner

Header Module Logo not appearing in Mobile/Tablet

lösung

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
Ratgeber/-in | Partner
Ratgeber/-in | Partner

Header Module Logo not appearing in Mobile/Tablet

lösung
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.