Skip to main content
G
Gina_Wadley
Inspiring
July 24, 2014
Answered

How to move a logo to the right side of the header and resize the image box - Customized Responsive HTML 5 Layout - RoboHelp 11

  • July 24, 2014
  • 1 reply
  • 6762 views

I created a customized HTML 5 Layout based on the Theme1_Standard layout.  Our logo is rectangular and will not fit in the default image box.  I want to move the logo to the right side of the header.  I don't see how to do this in the Layout Customization dialog.  Is there a way to do this in the html code somehow?  By the way, the logo looks great in the desktop and table Preview from the Layout Customization dialog.  It is the correct size and the header title adjusts to the right so that there's enough space for the rectangular logo. However, in the phone preview, the logo is tiny.  And when I generate the Responsive HTML5 single source layout with the new theme, the logo is tiny in the Chrome preview, even for desktop.

Thanks.

Gina

This topic has been closed for replies.
Correct answer Willam van Weelden

You can change this behaviour in the file main.css. It is a bit more work than you might expect though;

Open the file with a text editor and search for 'table.headertable td.logo'. Here you will find settings for the width of the logo, something like:

width: 4em;

Simply make this wider to adjust the image. Note that you will need to do this several time, as several devices have different widths for the logo.

Kind regards,

Willam

1 reply

Willam van Weelden
Willam van WeeldenCorrect answer
Inspiring
July 24, 2014

You can change this behaviour in the file main.css. It is a bit more work than you might expect though;

Open the file with a text editor and search for 'table.headertable td.logo'. Here you will find settings for the width of the logo, something like:

width: 4em;

Simply make this wider to adjust the image. Note that you will need to do this several time, as several devices have different widths for the logo.

Kind regards,

Willam

    C
    Carol Elkins
    Known Participant
    August 22, 2014

    Willam, could you also respond to Gina's comment about the logo being too small and resizing too small? I'm having that problem, too. I changed the logo to an 80x80 px PNG file as you suggested in a recent Webinar. How do I prevent the logo from scaling down in Responsive layout as the size of the screen decreases? I want the logo to retain its size relative to any text in the title bar.

    Thanks,

    Carol

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices