Problem with Skin's Logo on different devices

New Here ,
Jun 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

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

TOPICS
New UI, Output presets

Views

78

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

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.

Problem with Skin Logo_Laptop Minimized.png

 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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 29, 2021 Jun 29, 2021

Copy link to clipboard

Copied

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.

 

image.png

 

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 18, 2021 Jul 18, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 30, 2021 Jun 30, 2021

Copy link to clipboard

Copied

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.

 

image.png

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 18, 2021 Jul 18, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 19, 2021 Jul 19, 2021

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 19, 2021 Jul 19, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 19, 2021 Jul 19, 2021

Copy link to clipboard

Copied

LATEST

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation