Skip to main content
Known Participant
June 28, 2021
Question

Problem with Skin's Logo on different devices

  • June 28, 2021
  • 6 replies
  • 1104 views

When my published web help is viewed on smaller screen devices such as mobile phones or tablet or half screen on laptops, the logo is cut off (see attached screenshots).

Any suggestions how to fix this so the logo adjusts on the header and is viewable on all devices?

Judy

This topic has been closed for replies.

6 replies

Peter Grainge
Community Expert
Community Expert
July 19, 2021

With the appropriate desktop/mobile icon selected, all the settings determine what you can or cannot do with the skin.

 

Try with a fresh copy of the skin as I thought the logo would be left aligned. I have to go out now so I can't stop to check.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Peter Grainge
Community Expert
Community Expert
July 19, 2021

Shouldn't this be asked in the other thread for continuity?

 

It's at the top of the skin editor screen. Two size options now. Desktop and mobile. Also a preview.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Judy5E7DAuthor
Known Participant
July 19, 2021

Is there a place where you determine where the logo will be placed in the header above the TOC? I see that my logo is centered in the header space. If it was aligned to the left it might solve the problem of the logo size not showing properly in different settings. I already resized the logo to half its width and I still have the same problem.

Peter Grainge
Community Expert
Community Expert
June 30, 2021

Whilst you gave us the version, you didn't say whether it was Classic or New UI. I think New UI as you refer to the preset.

 

It's not an output setting but defined in the skin. Different logos for different devices.

 

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Judy5E7DAuthor
Known Participant
July 19, 2021

You are right. I must have published it in the Classic instead of the new UI version of RoboHelp. I don't see those options in the new UI version. Is there an output preview in the new UI Robohelp like in the Classic version?

Peter Grainge
Community Expert
Community Expert
June 30, 2021

Essentially it needs to be square or round. Certainly not as wide as yours. I will have to check if phone settings allow a different logo. 

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Judy5E7DAuthor
Known Participant
June 30, 2021

Where in the RoboHelp Output Settings do you configure the mobile settings for a output preset?

Judy5E7DAuthor
Known Participant
July 19, 2021

I can't find my recent post about the problem with the logo in different outputs. I resized the logo a lot (half the width or even more). It still was cut off or didn't show at all in the tablet and mobile outputs. I think the problem is that RoboHelp places the image (the logo) in the middle of the header and not to the left. Is there a way to change where the image is placed in the space above the TOC?

Peter Grainge
Community Expert
Community Expert
June 29, 2021

You have tagged your post New UI and Output Presets which is New UI terminology. Your screenshots though show the Employee Care 3 sample project which is a Classic project.

 

If you look at the width of the TOC on a desktop, it can accomodate your wide logo. On a phone or a tablet that area is narrower, hence your problem.

 

I have added a line to make it clearer. Your logo needs to fit to the left of the line.

 

 

BTW. Please use the photo icon to insert images within the post. Seeing an image inline with the text makes it easier for anyone answering or viewing the post.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Jeff_Coatsworth
Community Expert
Community Expert
June 28, 2021

What version of RH and what skin/preset are you using?

Judy5E7DAuthor
Known Participant
June 30, 2021

I am using RoboHelp 2019 version 2019.0.11

The skin is one I adapted to fit my company's color and logo and Output preset is Responsive HTML 5. Below is an image that shows better what the problem is.

 Thanks, Peter for your advice. I will try it by making sure the logo image is the right size and that it fits within the header border you suggested.