Does my forum look responsive to you

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Does my forum look responsive to you

Post by TheButcher2 » Thu Oct 31, 2019 12:34 pm

I get this asked every few days, make your forum responsive, this is what i see on my IPhone, can you please check and let me know if it works for you guys, would appreciate this, I do not see anything wrong.

Here is a screen capture of what one member sent me and it is pretty much what I see, so what is wrong here.

PS both my forums use the prosilver theme I modified, you see one it should be the same for both, eg https://www.sponsorchat.com

Peace


Dave
Attachments
sponsorchat.net-attachment-2019-10-25-152520.jpeg

User avatar
EA117
Registered User
Posts: 1050
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Does my forum look responsive to you

Post by EA117 » Thu Oct 31, 2019 1:22 pm

I agree with your users, that this style and site are not responsive. What you're showing a screen shot of is what would be described as "seeing the desktop site" on a mobile device; i.e. nothing has actually adapted to the smaller device screen size, and the site is simply displaying in the mobile device web browser no differently than it would in a web browser on a normal computer desktop.

One "key thing" missing is that your modified style no longer declares the "viewport" meta tag in the header, like you see being done in the original prosilver and other styles:

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1" />
This is what allows prosilver's responsive.css to "kick in" and modify things based on how small (narrow) the viewport becomes. e.g. When the screen drops below a certain size, the margins and unnecessary forced whitespace might be eliminated in order to make more room. When the screen drops below an even lower threshold, certain elements will simply be hidden entirely in order to make even more room available for the information that needs to be displayed. And so on.

Adding just the "viewport" tag to your current site causes it to look like this on a phone screen, which begins to move closer to what phone users are expecting:

Code: Select all

Removed image as image contains references to pornographic content which is against our rules [hanakin]

So your site isn't "ready to be responsive" quite yet, but adding "viewport" would be the first of multiple steps in making it happen. Anything that is "still exactly as prosilver" should already be setup for responsive behavior, so long as the classes and IDs responsive.css is targeting haven't been changed.

But you'll need to address the things like your site header/logo, the advertisements that were added, the extra menus that were added, and anything else that was added and isn't already being addressed in responsive.css. This might include even making advertisement or banner images which have a different aspect ratio, for use specifically when the screen drops below a certain size.

As another comparison, here is how phpbb.com/community looks on the same device:

www.phpbb.com_community_(iPhone 6_7_8 Plus).png

User avatar
Forex Station
Registered User
Posts: 77
Joined: Thu Apr 06, 2017 2:26 pm
Location: Sydney

Re: Does my forum look responsive to you

Post by Forex Station » Thu Oct 31, 2019 2:47 pm

No, it's definitely not responsive. It's a resized Desktop version.
Proudly powered by phpBB for almost 4 years now: forex-station.com :mrgreen:
Global Alexa rank: 55,000

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Thu Oct 31, 2019 4:32 pm

Okay thanks for that I added the meta tag, and will see what else I can do, any tips would be more than kind.

I am trying to get the banners to resize on the IPhone and not having luck.

Peace

User avatar
Christian 2.0
Former Team Member
Posts: 4501
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Does my forum look responsive to you

Post by Christian 2.0 » Thu Oct 31, 2019 4:51 pm

The header uses <table> code which isn't ideal for responsive layouts.

Can you temporarily remove that and see if it remedies the problem? If yes, then we can help with more viable alternatives :)

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Thu Oct 31, 2019 5:30 pm

Christian 2.0 wrote:
Thu Oct 31, 2019 4:51 pm
The header uses <table> code which isn't ideal for responsive layouts.

Can you temporarily remove that and see if it remedies the problem? If yes, then we can help with more viable alternatives :)
Table code removed and this added

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1" />
Problem I see is the 728x60 banner on top and the 468x60 bottom banner, these are served with Revive Adserver. Have to see what can be done to make the banners responsive.

Thanks for the elp

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Thu Oct 31, 2019 6:50 pm

Don;t waste your time on this guys, I can not find a fix for the ad management system I am using to make the banners responsive, so it's going to have to stay the way it is. I changed the couple of things I did earlier to the way it was.

Thanks for all your time and help.

Peace

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Does my forum look responsive to you

Post by Tastenplayer » Thu Oct 31, 2019 9:08 pm

When I change in Firefox for the banner ads in header:

Code: Select all

img {
     width: 90%;
}
Then it's fully responsive.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Thu Oct 31, 2019 9:19 pm

Tastenplayer wrote:
Thu Oct 31, 2019 9:08 pm
When I change in Firefox for the banner ads in header:

Code: Select all

img {
     width: 90%;
}
Then it's fully responsive.
Where would I put that on the page please.

Peace

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Does my forum look responsive to you

Post by Tastenplayer » Thu Oct 31, 2019 10:15 pm

I'm afraid I don't know that either.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Thu Oct 31, 2019 10:19 pm

I added the code to responsive.css for both m forums in my sig.

seems to do the trick, can you please check on your mobile phone.

Peace

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Fri Nov 01, 2019 1:59 am

Tastenplayer wrote:
Thu Oct 31, 2019 9:08 pm
When I change in Firefox for the banner ads in header:

Code: Select all

img {
     width: 90%;
}
Then it's fully responsive.
One big problem I have found is when a post with an image is quoted, the image is all messed up, please see the screen capture below.

Peace
Attachments
Screen Shot 2019-10-31 at 9.56.37 PM.png

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: Does my forum look responsive to you

Post by Tastenplayer » Fri Nov 01, 2019 1:14 pm

Is that an attachement image? Normally the image is not quoted, just the filename. Or have you installed an extension for it?
Your attachement picture - the post doesn't look like a quoted post.
quoteimage.jpg
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

TheButcher2
Registered User
Posts: 687
Joined: Tue May 13, 2014 11:38 pm
Contact:

Re: Does my forum look responsive to you

Post by TheButcher2 » Fri Nov 01, 2019 1:39 pm

When I go to reply to a topic with an image in it, the image is a bunch of waving lines.

Peace

User avatar
EA117
Registered User
Posts: 1050
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Does my forum look responsive to you

Post by EA117 » Fri Nov 01, 2019 3:48 pm

Code: Select all

img {
     width: 90%;
}
That pretty much "has to" create issues elsewhere, because the selector is specifying "all <img> elements anywhere in the document." The advertisement images aren't being selectively targeted. Specifying only a width: value without any other controls also means the aspect ratio can become distorted (stretched/compressed just along the horizontal axis).

The "quoted image" being shown in the example here is simply a smiley image. Since those are rendered using <img> elements, they were also affected by the CSS which was intended to fix the advertisement display. As would anything else using an <img> element.


The Revive Adserver-generated content is notably devoid of any IDs or classes to enable being uniquely targeted for CSS styling. I've never used Revive or any other advertisement system, but a quick check of Revive's support area shows your question is not uncommon.

Apparently the solution they're recommending is to create different Revive advertisement "zones", and use Javascript to switch "zones" when the screen width drops below a certain threshold. i.e. One zone would have the 728px ad associated to it, and the alternate zone would have only a 350px version of that same ad associated to it. These are Revive-specific "zone" mechanisms, and I'll refer you to their support since it's nothing I could clarify further.

The advertisement terms of service may not allow you to "re-size" the advertisement using CSS and still get paid for it. Again, not that I've used ad systems before, but it "makes sense" that they can't just let people resize ads to something "unreadable but convenient", and still get full credit for the impressions. That too is up to you to figure out, based on what you've agreed to with Revive.


Ignoring the question of whether you're allowed to or not, the quickest fix for a CSS-based resize is to add unique classes to the <center> elements you have around the 728 and 468 banners, and then use CSS that targets only the <img> elements within those classes. Such as changing your HTML to something like:

Code: Select all

...header....

<center class="SponsorChatRevive728">
...Revive 728px ad invocation code...
</center>

...body...

<center class="SponsorChatRevive468">
...Revive 468px ad invocation code...
</center>
And then target those <img> elements in responsive.css when the viewport drops below those ad widths:

Code: Select all

@media (max-width: 728px) {
.SponsorChatRevive728 img { max-width: 100%; height:auto }
}

@media (max-width: 468px) {
.SponsorChatRevive468 img { max-width: 100%; height:auto }
}
Using responsive.css of course means the "viewport" tag will be required in your <head> section, too. While you're at it, you may as well treat your site logo the same way, when eliminating the use of <table>:

Code: Select all

<center class="SponsorChatRevive728">
<a href="https://www.sponsorchat.com/index.php" title="Sponsorchat Adult Webmaster Board">
  <img src="https://www.sponsorchat.com/images/sctoplogo2.jpg" border="0">
</a>
</center>
This will leave the sizes alone when the site is being viewed on a large screen, but will start scaling the images (maintaining their aspect ratio) once the screen width is less than the width of the advertisement images.

Again, to stay within your Revive terms of service, you might not be allowed to take this CSS approach, and need to use Revive's "zone" approach instead. That's between you and Revive to figure out.

Post Reply

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