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!
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%);
}
}
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.