How do you make banner ad responsive?

kristinehenry · February 2017

Hi there --

My banner ad used to be responsive but for some reason it no longer is (it looks fine on desktop but doesn't shrink to fit on iPhone). What should I do differently?

This is what I have in the header/subheader "extra" portion:

and I have custom CSS to make the banner ad larger:

.header-magazine #Top_bar .banner_wrapper { width: 600px !important; }

.header-magazine #Top_bar .banner_wrapper img { max-height: 118px !important; }

Thank you!

towsonflyer.com

Albert · February 2017

Hi,

to make the banner responsive, please remove below custom css line:

.header-magazine #Top_bar .banner_wrapper { width: 600px !important; }

kristinehenry · February 2017

I just added that line, with Muffin Group's help, to make it appear larger. But why can't it still be responsive? Is there a different change I can make?

thanks!

Bryan · February 2017

Hi,

Remove the custom css line:

.header-magazine #Top_bar .banner_wrapper { width: 600px !important; }

kristinehenry · February 2017

Right, that's what you said before. But I'm saying that I recently added

.header-magazine #Top_bar .banner_wrapper { width: 600px !important; }

because I wanted the banner ad to appear larger on the site (on desktops). So if I remove the line, it won't appear larger. But I'd still like it to be responsive so it shrinks on tablets or phones. How can I do that?

Thanks!

Bryan · February 2017

Try this then:

.header-magazine #Top_bar .banner_wrapper {
    width: 100%;
    max-width: 600px;
}

kristinehenry · February 2017

That worked - thanks! I have another quick question: What is the best way to do a search? If I want to find something about banner size and I type "banner size" into the search box, I get all past discussions that contain banner OR size. How do I narrow it down to only discussions that have both words? Thanks!

Bryan · February 2017

I'm happy it helped. Search functionality is wordpress default. You cannot narrow it down so easily.

How do you make banner ad responsive?

Comments