Robohelp 2015: How to amend the logo size in the responsive HMTL5 output

Question

Good MorningI can edit my screen layout to include a logo at the top left of the header on my HTML5 responsive output, but this logo looks small and i would like to change the size of the logo.Is this possible, maybe through amending the HTML code or the layout.css file?I am not sure how to start.

Willam van Weelden · Answer

The logo is determined in the layout.css file. The logo is set in multiple locations. I'm not sure which layout you're using, so here are the CSS selectors for Charcoal_Grey. But the Azure_Blue has similar selectors.

body.media-desktop div.header div.logo

body.media-landscape div.header div.logo

body.media-mobile div.header div.logo

You have to update the sizing for all three selectors to target all devices. Please note that the title in the header is expecting a logo of a certain size. If you change the logo sizing, you may need to update the positioning of the title as well. For mobile, please check:

body.media-mobile div.header div.title

It may be easiest to use the SCSS files to generate the layout.css. This SCSS holds all calculations for sizing needed so you don't have to do it manually. You can find instructions and the files here: Learn how to download and use new screen profiles and layouts in RoboHelp

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded