The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Incorrect Table width scaling in desktop mode on mobile devices

Go down

In progress Incorrect Table width scaling in desktop mode on mobile devices

Post by NAMTron on February 13th 2018, 6:50 am

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
avatar
NAMTron
New Member

Posts : 5
Reputation : 1
Language : English
Location : Ithica

http://www.newagemugen.forumotion.net

Back to top Go down

In progress Re: Incorrect Table width scaling in desktop mode on mobile devices

Post by SLGray on February 13th 2018, 8:39 am

Create a logo for the mobile version and do this:


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 42775
Reputation : 3011
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Incorrect Table width scaling in desktop mode on mobile devices

Post by NAMTron on February 13th 2018, 11:44 am

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
avatar
NAMTron
New Member

Posts : 5
Reputation : 1
Language : English
Location : Ithica

http://www.newagemugen.forumotion.net

Back to top Go down

In progress Re: Incorrect Table width scaling in desktop mode on mobile devices

Post by pedxz on February 17th 2018, 3:05 pm

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;
  }
}
avatar
pedxz
Forumember

Male Posts : 86
Reputation : 14
Language : português

http://ajuda.forumeiros.com/u62843

Back to top Go down

In progress Re: Incorrect Table width scaling in desktop mode on mobile devices

Post by NAMTron on February 17th 2018, 4:05 pm

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).
avatar
NAMTron
New Member

Posts : 5
Reputation : 1
Language : English
Location : Ithica

http://www.newagemugen.forumotion.net

Back to top Go down

In progress Re: Incorrect Table width scaling in desktop mode on mobile devices

Post by pedxz on February 17th 2018, 4:23 pm

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?
avatar
pedxz
Forumember

Male Posts : 86
Reputation : 14
Language : português

http://ajuda.forumeiros.com/u62843

Back to top Go down

In progress Re: Incorrect Table width scaling in desktop mode on mobile devices

Post by NAMTron on February 17th 2018, 4:39 pm

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.



avatar
NAMTron
New Member

Posts : 5
Reputation : 1
Language : English
Location : Ithica

http://www.newagemugen.forumotion.net

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum