Can you make a banner responsive to mobile screens using HTML only?

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

Can you make a banner responsive to mobile screens using HTML only?

Post by WWu777 »

Dear support,
Is there an HTML code that will make a banner responsive to mobile screens and desktop screens? One that doesn't involve editing CSS? Can you set a percentage instead of the pixels of the height and width?

For example, how would I make these banner codes in HTML responsive to different sized screens? Is there a simple way?

Code: Select all

<iframe src="http://www.loveme.com/contentads/afa/events.shtml" width=250 Height=450>
</iframe>

<br><br>

<iframe src="http://loveme.com/igo/happierabroad/11/40/7/120/180/0" width="120" height="1260" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>

<br><br>

<!-- Banner link to Cherry Blossoms -->
<script language="JavaScript">
document.write('<A HREF="http://www.blossoms.com/?adid=WP3044" TARGET="_new" rel="nofollow"><img src="http://www.blossoms.com/banner.php?size=120x240" BORDER=0></A>');
</script>
<!-- End of banner link -->
User avatar
eeji
Registered User
Posts: 1461
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by eeji »

not with html alone.
My phpBB styles: phpbbstyles.iansvivarium.com
My "board": iansvivarium.com
(yes, it's running phpBB!)
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by WWu777 »

What if I removed these parts of the code:

width=250 Height=450

Would the banners automatically be responsive like the rest of the forum, since its dimensions would no longer be set?
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by Hanakin »

no HTML is not code its just markup so you can not add dynamic functionality with HTML by itself you need javascript or CSS
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by PlanetStyles.net »

Hi,

Can I ask what the end goal you're trying to achieve is?

I can see the iFrames load vertical banners. Where would you like them displayed on desktop, and where would you like them displayed on mobile?

Additionally can you explain the CSS limitation? Although you don't have access to edit the CSS coming through the iFrame, it's very easy to override it by adding CSS to your style's stylesheet using the same CSS selectors.

Thanks :)
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by WWu777 »

Christian 2.0 wrote: Thu Nov 23, 2017 1:34 pm Hi,

Can I ask what the end goal you're trying to achieve is?

I can see the iFrames load vertical banners. Where would you like them displayed on desktop, and where would you like them displayed on mobile?

Additionally can you explain the CSS limitation? Although you don't have access to edit the CSS coming through the iFrame, it's very easy to override it by adding CSS to your style's stylesheet using the same CSS selectors.

Thanks :)
I would like to make the banners responsive, like the new Google adsense banners are. That way, they will fit proportionately on both desktop screens and mobile screens. Currently the way my banners are on desktop screen is fine. That I know how to adjust. But the mobile screen shows them looking huge and going off the screen. Way out of proportion.

Is there a theme just for mobile screens like the previous versions of phpbb had?

How do you use CSS? How would CSS target an HTML banner code outside of it?

Thanks.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by PlanetStyles.net »

Are you able to share a link to your forum?

It'll probably be easier to see what's going on and to recommend a fix :)
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by WWu777 »

Christian 2.0 wrote: Thu Nov 23, 2017 10:45 pm Are you able to share a link to your forum?

It'll probably be easier to see what's going on and to recommend a fix :)
Sure here:
http://www.happierabroad.com/forum/index.php
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by PlanetStyles.net »

Your forum contains subject matter that I fundamentally oppose.

I won't be able to help you.
WWu777
Registered User
Posts: 802
Joined: Tue Aug 14, 2007 12:40 pm
Contact:

Re: Can you make a banner responsive to mobile screens using HTML only?

Post by WWu777 »

Ok well I found another solution. I installed another theme in my forum without the banner ads and named it a mobile theme, which it is since its responsive. I put a link to it in the header called "Mobile Friendly Theme". Then I used the Proflat theme since the other ones had bugs in them that caused the "online" tag to repeat all over the post. Only the Proflat theme worked without trouble. Otherwise I would have chosen Elegance or one of the Artodia styles.

If anyone else has a similar problem and can't make your banners responsive, I recommend doing the same. Just put a link at the top that's easy to see, called "Mobile Theme" or "Mobile Friendly Theme" so those on a mobile device can go to it quickly and not have to deal with disproportionate banners.

Hope that helps.
Post Reply

Return to “[3.2.x] Styles Support & Discussion”