Incorrect Table width scaling in desktop mode on mobile devices

Technical Details

Forum version : #PunBB
Position : Administrator
Concerned browser(s) : Mozilla Firefox
Screenshot of problem : https://i.imgur.com/sqqmHAA.jpg
Who the problem concerns : All members
When the problem appeared : Today after image change
Forum link : http://www.newagemugen.com

Description of problem

Hello.
I am NAMTron new admin for newagemugen.com for past few months.

My site uses 1600px a table width and 1600px banner logo png image.
It displays correct on pc, but the tables do not scale to 1600px wide to match the logo bannercwidth when viewing the site in web mode/desktop mode on a mobile device.

I assume there is some specific code which must be added to the CSS Style sheet that will make the site appear the same on mobile in desktop mode as it does on pc.

Please point me in the right direction.

Thank you again

Create a logo for the mobile version and do this:

Hi there.
Thank you for the swift reply.
However perhaps I did not explain the problem properly.
I am aware of the mobile version logo feature - I am using a smaller logo for that and it is not an issue.

I have no scale problems when viewing the mobile version of my forum on a mobile device.

I have problems when viewing the web version/desktop pc version of my forum on a mobile device.

Here is the image showing the table scale issue


I need to know how to modify the CSS style sheet so that when the forum is viewed on a mobile device in desktop mode/web version mode the tables on the desktop version of the forum scale to 1600px width correctly the same way they do when I view the forum on PC

Hey,
Well let's fix some things slowly, add this from your CSS:

Code:

#pun-logo img {
    max-height: 390px;
}
div#pun-announcement img {
    max-width: 500px!important;
}
@media screen and (max-width: 1200px) {
 #pun-logo img {
      max-height: 335px!important;
  }
}

Hi there.

Thank you for looking at my problem.
I tested your code to the CSS.

Unfortunately the code you gave me is just reduces my logo sizes and announcement image sizes back to smaller than they were before I added the new ones.
I dont want to make my logo and announcement images 1200px and 500px as per that code.

It doesn't make the table width scale correctly when i view the site in web/desktop mode on a mobile device.
All i want to do is make the table width scale correctly on mobile (in desktop mode) the same way they do on PC (which is displaying correctly with no problems).

sorry i did not understand:

mobile


web



*use my code

Code:

@media screen and (max-width: 1200px) {
 #pun-logo img {
      max-height: 335px!important;
    }
div#pun-announcement img {
    max-width: 500px!important;
}
span[class*="cat"] { display:none}


can you describe more the question, please?

Hello.

My question is, what do I have to add to the CSS, so that that when in desktop mode on a mobile device, the table width scales to match the images width the same way it does on PC as per this image:



As you can see in the image you posted here,

the Table width does not scale to match the logo/announcement image/category header image when you view the web version of the site on a mobile device.



You can see the tables are stopping just before the end of the images, so they are not automatically scaling correctly like they do when viewed on PC.

However, if you view it on PC, it displays just fine.