Distortion of logo - frameless output

[DeeMay]

Greetings,

I’m working on setting up frameless output with the Oceanic template using RoboHelp version 2022.1.188. Does anyone have recommendations for preventing the logo from being distorted when the browser window is reduced in size? I looked through the Oceanic template Header > logo options; maybe there’s a setting I’m overlooking among these options. I’m using a logo in SVG format.

[Amebr]

What do you mean by "distorted"? A screenshot would help. Please use the Insert Photo icon to include the image inline with text as it's easier to help when the image and text are visible at the same time. The settings for the logo and header sections will probably help too, as it's possibly to do with any customisations you've made.

[DeeMay]

Thank you,

When the browser window is reduced in size to approximately 25% of the screen size or less, the image doesn't maintain its original appearance. I inserted an example logo below. 

Original:

After browser window is reduced:

This has happened with both svg and png files. It also occurred in HTML5 output with the Azure Blue skin. The current settings for Header > logo (Oceanic skin) are listed below.

• Layout > height: 48px
• Layout > width: 85px
• Layout > right margin: 1 rem
• Background shading is transparent.

[Amebr]

In the skin there's a button at the top to switch to mobile layout. Perhaps try adjusting the logo size there as well?

If that doesn't work, and you can't find any other setting to modify that part of the page, you'll need to inspect the output to work out what style needs to be adjusted, add that style into a custom css file, and add the css to the skin under User Assets.

[DeeMay]

Thank you, @Amebr. I'll try these suggestions.

[DeeMay]

The designer on our team was able to review the files and recommended editing the layout.css in the output (template > Oceanic > 2019 > layout.css) by removing the width and height specifications in the layout header for the mobile view (noted below). Removing the width and height worked. Even though I wasn't generating mobile output (it's frameless output), the width and height noted below were affecting a minimized screen size. 

I'm not sure that there's a way to remove the height and width values through the RH interface unfortunately. I'm going to check into this in the next few days.

.RH-LAYOUT-BODY-mobile-view .RH-LAYOUT-HEADER-logo {

 width: 2.5rem;

  height: 2.5rem;

  border: none;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  background-position: center;

  padding: 0;

  cursor: pointer;

  margin-right: 1rem;

}

[Amebr]

Add that style to a custom css file in a temporary directory. Then change the width and height values to the text value "unset". Then open the skin and find the User Assets section (this location depends on the output type and skin selected), and add the css file there. Generate and see if that fixes the output for you.

[Amebr]

Oh, and delete the other properties (border, cursor etc) from this custom stylesheet. If they're listed here you'd need to manually change them here instead of just changing the skin as normal. Only add them here if changing them in the skin doesn't flow through to the output.