Logo to retain height and add padding

  • nicksoph

    (@nicksoph)


    10 years ago

    I have set Customizer to show a .svg logo and (1)title on the right but otherwise left the header settings at their defaults with the (2)social sharing icons on the left and the (3)navigation links beneath (with (1)(2) and (3) in a shadowed box) and want to make the following changes to how it appears;

    a. for the logo to retain its height for longer as the viewport narrows – currently the logo size continues to decrease as the viewport is narrowed whilst the height of the shadowed box reaches a minimum and then does not change its height until it reaches the point when the layout changes – I would like the logo to retain its proportions and for its height never to be smaller than the shadowed box,

    b. for the logo to have a similar amount of space on its right and left as the space that is on the left of the menu block.

    c. that when the layout changes for smaller devices the logo has a small amount of padding either side – currently the .svg touches either side of the viewport.

    Sorry but the site is only locally hosted but any guidance would be appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter nicksoph

    (@nicksoph)

    I notice this is one of the few posts not to have received a reply – Does it not follow the correct form ? Should I have broken it up into individual questions or something?

    Hi
    a) I presume you haven’t checked the option Force logo dimensions to max-width:250px and max-height:100px.
    Logo is in a span3 inside a row fluid. Bootstrap 2.3.3 span’s (inside row-fluid) width is expressed in percentages. Logo img width is 100% of its container (span3). This means that when you shrink or enlarge the window the span3 width changes, the image width changes so the height (set to auto to keep the aspect ratio) changes. Basically you don’t want the logo container width is a percentage of the window width. I think you can do that, write a css rules (or a lot of them) to keep the logo container width fixed in different viewports (the ones you want), or just change the class (spanX) of the logo and the navbar. ( you might find this useful )
    b) don’t understand, but still probably css stuff, you can achieve almost everything you want writing the correct css rule (which I think in this case is pretty ad-hoc, so depends on your logo and since cannot see it …). To individuate the right css selectors I suggest you to use some tools like the google chrome inspect element, or the firefox’s addon firebug
    c) again about logo’s container width (set to 100% in small viewports) and logo img width set to 100% . In this ‘case the css is simpler than the case a), you can find the right selectors using the tools suggested in b) and write the css rule using the media queries (to limit it just to the interesting viewport). In this case you to understand media queries (useful starting point resource.)

    I see this isn’t a solution, but your questions haven’t THE solution. I can (with all my knowledge limits) point you in what I think is the right direction, nothing more, in this case. ??

    Thread Starter nicksoph

    (@nicksoph)

    Thanks – that gives me lots to work with and knowing where it is based in the CSS is a great help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo to retain height and add padding’ is closed to new replies.