How to make banners mobile responsive
Beth avatar
Written by Beth
Updated over a week ago

Making the TrustSpot banners responive is easy. You just need to add 2 different banner sizes to your page, surround them in <divs>, then add a litte CSS.

We are going to use 2 banners (one that's desktop size, then a small one for mobile) then show/hide them depending on the user's screen width. This can be done fairly easily using some CSS.

1) Copy and paste both a large desktop sized banner and a small mobile sized banner on top of each other.

2) Enclose both the banner iframes inside of divs like this:

<div id="trustspot_banner_large">

// large iframe you copied / pasted goes here

</div>

<div id="trustspot_banner_small">

// small iframe you copied / pasted goes here

</div>

3) Add the following to your CSS.

@media (max-width: 779px) {
 #trustspot_banner_large{
 display:none;
 }
}
@media (min-width:780px) {
 #trustspot_banner_small {
 display:none;
 }
}

Adjust the width numbers according to the large banner you choose. In the above example, 780 is the width of our largest banner. If you use the medium banner, change the numbers to 599 and 600, respectively as that is the width of the medium banner.
​ 
 What those styles do is hide the large iframe when the window is too small to show it (like on mobile), and hide the small one when it's not too small (desktop). Therefore, when on desktop you will see the large banner, and on mobile you will see the small one.

Did this answer your question?