The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Incorrect Table width scaling in desktop mode on mobile devices

3 posters

Go down

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

Post by NAMTron 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
NAMTron
NAMTron
Forumember

Posts : 32
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 February 13th 2018, 8:39 am

Create a logo for the mobile version and do this:
punBB - Incorrect Table width scaling in desktop mode on mobile devices Mb10


punBB - Incorrect Table width scaling in desktop mode on mobile devices Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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

Post by NAMTron 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
punBB - Incorrect Table width scaling in desktop mode on mobile devices SqqmHAA_d

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
NAMTron
NAMTron
Forumember

Posts : 32
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 tikky 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;
  }
}
tikky
tikky
Forumember

Posts : 894
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

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

Post by NAMTron 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).
NAMTron
NAMTron
Forumember

Posts : 32
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 tikky February 17th 2018, 4:23 pm

sorry i did not understand:

mobile
punBB - Incorrect Table width scaling in desktop mode on mobile devices RdsbVWV

web
punBB - Incorrect Table width scaling in desktop mode on mobile devices EHIBfBB


*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?
tikky
tikky
Forumember

Posts : 894
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

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

Post by NAMTron 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:

punBB - Incorrect Table width scaling in desktop mode on mobile devices EVdL9Jl

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.

punBB - Incorrect Table width scaling in desktop mode on mobile devices EHIBfBB

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.



NAMTron
NAMTron
Forumember

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

http://www.newagemugen.forumotion.net

Back to top Go down

Back to top

- Similar topics

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