ginerjm Posted April 17, 2023 Share Posted April 17, 2023 A bit new to this CSS technique and am having an issue with a certain web page when viewed on my iphone. I click from my main menu to this page and it always shows up 'enlarged' on my screen. My laptop has no issues but my phone, using 'responsive css', has to be shrunk down to fit the content onto the screen. I also have to design the screen (for the iphone) to be 150% in width In the body I have: <meta name="viewport" content="width=device-width,initial-scale=1"> And in the css I have: @media screen and (max-width: 600px) I have been using this in many of my screens for the last year or so and have not had this issue so I"m stuck as to why and am wondering how to resolve this. Any pointers? Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted April 18, 2023 Share Posted April 18, 2023 On 4/17/2023 at 10:15 AM, ginerjm said: In the body I have: <meta name="viewport" content="width=device-width,initial-scale=1"> Is it in the <body> tag...or <head> tag? It should go in the latter. Of course, I haven't tested what happens if its in the <body> tag... Quote Link to comment Share on other sites More sharing options...
ginerjm Posted April 19, 2023 Author Share Posted April 19, 2023 The tag is in the Head section. And it works for all my other places; just not this page for some reason. I would show it but it is a complex page of displays of different paragraphs and data that are all setup down the page for the user to scroll thru as I enable/disable different blocks of them during the event I am managing. Quote Link to comment Share on other sites More sharing options...
Solution kicken Posted April 19, 2023 Solution Share Posted April 19, 2023 If I am understanding the problem right, then it sounds like there's some element on the page that cannot be scaled down so the entire page gets scaled down so that element will fit. Examples could be form elements or images with set widths. My site for example has a couple pages with textarea elements that cause the page to not display scaled down on mobile. Adding width: 100% to them in the mobile styles would fix it, I just haven't done it. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted April 19, 2023 Author Share Posted April 19, 2023 (edited) I don't have any images involved. Just a bunch of divs that block out specific parts of the data that I am displaying which is plain text in p tags along with some html tables. During debugging every div has a border on it to help align my layouts. And the link from my menu that sends me to this script/page is nothing special. I'm hoping this is a situation that happens to anyone - just only on this page for me. I have pored over the css and html and can't see anything that I'm doing unusual. Trust me - it's actually a pretty simple page with much more non-PHP stuff than code. And - no JS code either. Edited April 19, 2023 by ginerjm Quote Link to comment Share on other sites More sharing options...
kicken Posted April 19, 2023 Share Posted April 19, 2023 Does the problem happen if you use a desktop browser's responsive design tools, or only on the physical device? Quote Link to comment Share on other sites More sharing options...
ginerjm Posted April 19, 2023 Author Share Posted April 19, 2023 Kicken solved this with one of his first comments: "an element that cannot be scaled down". I was making my body width to be 150% in order to fit somethings onto the page without overflowing. Once I stopped doing that and focused on making things fit the enlarged view ceased. I wrote this page several years before learning responsive css methods and never cleaned up a lot of old html. Now it's working. Thanks people. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.