How To Make Image Banner Ads Responsive?


#1

Hello Blogggers Now i want to ask you a question that in blog MBT i saw that the top right header ad was responsive so i want to know that how can i make it too for my blog ngtechzone. Generally what happens in my blog that if a mobile person or we re size the site tab the top right ad get’s vanished so i want to know how can i do that i am also giving you some pics-

http://ask.mybloggertricks.com/uploads/default/optimized/1X/8df15d58ea81782e36465cdf2694fbd4830f757f_1_505x500.png

~Thank You :smile:


#2

To make any Image Ad banner or Image Responsive enclose your Code inside the following container

<div class="myRespAd">
Your Code
</div>

And then you need to paste the following CSS to control its look and appearance. Add the code below just above ]]></b:skin>

/*----Making Images Responsive by "MBT"----*/
/*---For iPhone, Samsung etc.----*/    
@media only screen and (max-width:480px) {
    body .myRespAd img { 
      max-width: 98%;}
    }
/*---For Tablets iPads----*/
    @media only screen and (max-width:768px) {
    body .myRespAd img { 
      max-width: 70%;
      height:auto;
      margin-left:0px;
      position: absolute;
      left: 10px;}
    }

You can also further adjust the width of the Image banner for both tablets and smartphones by changing the max-width values. Your ads will now auto adjust themselves smoothly without effecting the image resolution. :innocent:

The same method is applied to make Buysellads Responsive. Buysellads ads allow responsive Ads only for Pro publishers but by using this technique you can make all your banner ads mobile friendly.


#3

Thanks @Mohammad for helping me :smile:

Good luck :slight_smile:


#4

But @Mohammad This Trick Is Working in Smartphones but in Desktop browsers when i resize the browser ad disapperas please can you give me a solution of this :smile:


#5

I think this problem is with your template @ngtechzone! May be, the wrapper have display none to small screen sizes… :smile:


#6

No vector all other imges and ads are shown and are fully responsive in small screen sizes i have checked it :slight_smile:


#7

Kindly always share the url of the source you have problem in so that we may save time and try to help better.

You need to inspect the CSS and see if you have mistakenly hidden the section in a wrong break point


#8

Hello @Mohammad My Blog Url- http://ngtechzone.blogspot.com/ Please Check The Top Right Ad :smile:


#9

As I guessed it was a display:none mistake. Kindly remove this code from your template

@media only screen and (max-width: 767px)
#adstop {
  display: none;
}

#10

Thank You Very Very Much @Mohammad That Really Worked For Me :slight_smile: Thanks :slight_smile: God Bless You :angel:


#11

Always a pleasure. May God bless you more. I am closing this topic now :innocent:


#12