Hi everyone! I’m new here. I’m looking for help with a problem, and I have not garnered much help (actually nil) from the Stack Overflow community. I did a quick Google Search for “Stack Overflow alternatives”, and found this forum. So, here I am.
On to my issue…
I can’t seem to figure out why text and form elements are soooo tiny on some of my websites webpages.
Here’s an example (View with “Responsive” mode, in Chrome Web Tools): http://www.jamesartgalleries.com/contactus.php
Hi JamesAndersonJr welcome to the forum
Is there a reason you are using
<meta name="viewport" content="width=1000">
instead of
<meta name="viewport" content="width=device-width,initial-scale=1">
Yes, because actually it works much better than the latter, because I’m basically telling the mobile device to pretend that it has a screen width of 1000px which is precisely the amount of space the content needs to look as I intended it to on Desktops. And also, using “initial-scale” is bad news for consistency across various devices, because if you want the mobile browser to be flexible in displaying large content, it’s best not to even set it. Thanks for your reply!
No it doesn’t and no it isn’t. Those misguided beliefs are the basis for the display problems that you face. Until you are willing to reconsider your mindset / belief system, there will not be a “right” solution to your display problem and your pages will continue to be unexpectedly difficult for users to view. Too much zooming and dragging around.
Are you also providing each visitor with a free microscope so that they can magnify the text big enough to tell that it is supposed to actually be text and not dots on their screen?
Even on my desktop I don’t use a viewport width of 1000px so you’d better supply a magnifying glass to those viewing your page if you expect them to be able to read it properly.
That is the crux of your problem and a severely misguided approach as others have mentioned. What you are doing is making the device scale the 1000px width until it fits in the mobile viewport which effectively for an iphone or similar will be scaled down until it fits the 320px viewport resulting in text much too small to read or be of any use!
You need to use initial scale as shown above and then use media queries to move content around so that it fits better in the smaller viewports.
Any other approach is nonsense really because rather than scaling text or layout smaller for mobile you probably should be enlarging text a little as it is hard to read on mobile anyway…
The contact page you linked to is a simple page and would be easy to convert to responsive design if you are willing to use the right approach.
The method you are using is a dead-end and you can’t go there 
As @PaulOB said:
Design responsively, use the correct viewport meta tag, the layout will adapt to the width of the device, piece of cake.
@ronpat Hey, How did you do that! can you share your mods, so I can update my code to work like so?
Let me look through the HTML and CSS again and make a few notes.
These files work together. There are a few changes in the contactus.html file and the contact_form1.css file. While there are many opportunities for improvement in the HTML and CSS files, I only changed those properties and values that contributed to the responsiveness of the page. Some of the widths chosen were at my discretion and can be changed to suit your eye.
I can’t possibly shout loud enough that inline CSS styles in the HTML are poor practice. They should have been replaced by CSS equivalents before the page was coded.
There are a few notes at the top of the CSS file and a few in the HTML file. It is possible that I made other changes that I forgot to note.
The attachment is a standalone collection of your files. Place it anywhere on your computer and double click the HTML file to open it in your browser. You can then decide whether it works for you or not.
JamesAndersonJr-contactus-responsive.zip (286.4 KB)
I like except for a few things:
BTW: That was hilarious commenting about my “!importants”.
I do that as a safeguard to make sure that style is not inadvertently overridden by accidental inline styling.
Do you really want a line of text to stretch from one side to the other of a wide screen? It might seem like an obvious thing to do, but long lines can be very difficult to read.
No, I just want the <hr> , and images to.
Clarity: I want the <hr> to span the whole screen but not pass the logo (as it is now), and I want both images to either be aligned right, or float right.
In fact, I was somewhat satisfied with how it looked on Desktop, and just wanted mobile optimized too, but did not want to use media queries.
The text fields should look exactly the same width as the Chrome screen shots in post #7. If it dosen’t, post a screen shot.
That length was one of my “discretionary” choices. You can change it.
The background gradient covers the entire viewport. The max-width of the page is limited to 1000px. It is noted in the HTML file. You can change that. IMO, No user should be required to reach/read across the full width of a 1920 screen for the contents of a web page that easily fits into a 960px width layout. Are you designing only for yourself or for other users? I think you need to consider how users might feel and react to your page.
We live in a dynamic world. You can post more questions as they arise.
Ok! I have updated nearly everything except the buttons!! 
Please re-review and let me know what you think!! 
I checked it with Chrome’s responsive dev tool and it seems to behave exactly the way the you wish. That’s a good accomplishment for the day. I think that having the form flush against the left wall of the big monitor looks unfinished. The page looks lopsided when compared to the wallpaper page where the contents are centered in the viewport.
I assume you will get around to cleaning up the inline CSS styles in the HTML eventually.
I think you can award yourself a thumbs-up for the day.
Thanks @ronpat! without your help I’d still be trying to figure it out.
So, Kudos to You too!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
