A client has asked me to add a banner ad in the header of a client’s website. The problem is that it looks OK in browsers on a normal desktop resolution, but doesn’t scale gracefully (and stay in the correct spot), when a browser window is a bit less wide than normal. I’ve set this up as a Generate Press element with a hook that displays the image “After Logo.”
Here is the CSS I currently have, which is based on what I’ve found on the Internet. I’m also open to suggestions as to how to configure a centered banner ad without having to add a new widget area with a child theme.
@media (min-width: 768px) and (max-width: 1024px) {
.header-banner img {
max-width: 100%;
height: auto;
width: auto;
margin: auto;
display: block;
}
}