Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1487448

    On this staging site:

    https://yu39su8np7.papa-view.com/

    the owner of the site requested that I use SVG images for logo in header and footer.

    I have read up on svg formatting only enough to understand the problems, but don’t understand enough to know the code solutions.

    In the header, the logo bumps up against the top and bottom of the header area, where there should be a little padding. I tried a few things in Quick CSS but only got the top to be a little padded, not the bottom. So I took that code out.

    In the footer, the logo behaves miraculously well (at least in Firefox) considering I just stuck it in there, but when I narrow the browser window to approximate mobile view and the footer areas stack, the logo gets much bigger than I want it because the constrained area is much bigger than the area it’s in in the desktop footer.

    Help!

    #1487449

    Well the logo itself is place as inline svg. But nevertheless – you can handle it like an image – and influence the space arround that svg with padding.

    in the footer there is a img tag with svg

    so try:

    #top .logo.avia-svg-logo svg {
      padding: 5px;
    }
    
    @media only screen and (max-width: 767px) {
      #footer-page .flex_column.first .avia_image {
        max-width: 180px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    #1487477

    This worked perfectly. Thanks!

    And I won’t include addresses to sites in my public posts anymore, I’ll put them in the private content. A flurry of attempted logins when I’m the only one with a user login.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.