Thanks prepu,
I’m thinking i’ll do it as a blog post. Can’t tell you when but will be within the next week or two.
Hey prepu,
The blog post has gone up, giving you step by step instructions on setting up responsive banner ads using a simple scenario.
Hope it helps!
Thread Starter
prepu
(@prepu)
Hi Ash!
I didn’t have time today to read carefully your tutorial. There is a matter that I see: did you try to open the “demo page” with a mobile?
I did it and I still see the banner as it was a computer bigger that 768px width. Perhaps it is better to add a code to check if the useragent is android, ipad, iphone… what do you think?
Hey Prepu,
No, that shouldn’t be required. I realised that I forgot to add the meta viewport tag to the head. I’ve updated this and now should display correctly. That will teach me to not check it on the mobile first 😛
I’ve updated the blog post to reflect this also.
Cheers for the heads up!
Thread Starter
prepu
(@prepu)
Hi Ash, now it is working great in your demo page.
Can you tell me where exactly do I have to add that meta viewport tag in the header.php?
After <header> or after <title>?
Now I am very close to it… hehehe.
Prepu,
<meta> tags go anywhere inside the <head> tags. Around the <title> tag is a good place 😉
Thread Starter
prepu
(@prepu)
Pufff…
I have followed your tutorial editing my style.css and my header.php with no success. First, I have thought that it was a theme problem but I have tried to do it in 3 diferent wordpress with diferent themes: Twenty Thirteen, Sommerce and Weaver II. Ash, can you tell me which theme did you use? (I guess one of your own creation)
I don’t know what I am doing wrong or what is missing but I don’t get it. I am very curious if someone else have try it.
Ash, I don’t want to waste your time. Thanks for everything.
Prepu,
This is irrelevant of the theme you use. I’ve had a look at the link further up the thread here and I can see you still have 2 banners in the ‘sidebar’…..
Your using widgets right? I think I may know whats going on here…
Are you setting the Advert type in the dropdown when creating the adverts?
Prepu,
Did some checking of the widget itself and it is actually ignoring the type when a single banner is used. I’m updating that now and will release an update for it. This should fix the issues your experiencing.
Prepu,
Just to stay one step ahead of you, I made the changes on your site via the console, found you using ‘movil’ at the advert type. Changed the class from sidebar to movil which hid the mobile banner you had in the sidebar.
After responding it, I noticed you have a few issues that you’ll need to sort out to get this to work which are theme related:
- The css hiding the sidebar adverts under 768px is also hiding the banner you have in your content. If you want to just target the sidebar banners in the sidebar, you’ll need to modify that CSS rule to
#sidebar .adkingprobanner.sidebar {display: none;}
- The mobile banner wont display regardless because the sidebar has display none on it at 980px. You may want to relocate the mobile banner to the footer if you can using the do_shortcode method instead.
Hope that helps. Let me know how you go
Thread Starter
prepu
(@prepu)
Ash, now it is working!!!
Thanks a lot for all your good job! I think many people will use it.
You were right and I have changed the mobile-footer with only “movil”. That was the only change I’ve made.
I would like to ask you a little thing… I have a Samsung Galaxy Note mobile. When I use it to navigate in the web (my testing web) the banner has a perfect width, but if i turn it to “landscape mode” the height of the banner is too much (almost 25% of the screen). Is there any way to limit the height even if the image is not proportional?
Thanks again, mate!
Hey Prepu,
Great to hear mate. Yeah certainly, I mentioned in the blog post that this was an issue with the method I explained and I also gave suggestions as to what to do about it. As doing that could get quite in depth, I didn’t want to continue down that path in the post.
A simple way, if you dont want it to be proportional is to set a max-height on the banner on the media query. That way it would only increase up to that point.
Thread Starter
prepu
(@prepu)
I did it thanks to you!
Now I have everything… The only thing I think it will improve it is to find the way to locate the banner in the footer (mobile version) not hiding the footer buttons (facebook button, Copyright…) I know this it has nothing to do with your plugin. It is from my theme’s footer.php file isn’t?
Hey Prepu,
You’re right that this is specific to your theme so technically I can’t help you with that. However a suggestion would be to add bottom padding to your footer when your mobile banner comes up. This way when the user scrolls to the bottom of your page, the mobile banner will go into the padding space instead of over your footer items.
Enjoy 😉
Thread Starter
prepu
(@prepu)
Ash, thank you for everything. Now I am out from home and with children so I cannot do anything.
When I come back from holidays I will try it.
Have good summer holidays!
