Home → How Do I... →

my page is not rendering properly on smart phones

• Edit

radha Padmasolala

Sep 04, 2014 @ 03:18 PM

My headers and footers are rendering only on a small part of the screen width while my main contect goes across the page correctly.
I am using this in styling headers and footers <meta content="width=device-width, initial-scale="1" name="viewport"/>

1. 1 Posted by radha on Sep 04, 2014 @ 04:32 PM

   

   can some one reply

   • Edit

2. 2 Posted by Wing Ming Chan on Sep 04, 2014 @ 04:42 PM

   

   Hi radha,

   Can you confirm that in all of your stylesheets, there are no widths specified for the headers and footers?

   Wing

   • Edit

3. 3 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 04:52 PM

   

   Yes. Should I send all the files.

   • Edit

4. 4 Posted by Wing Ming Chan on Sep 04, 2014 @ 04:54 PM

   

   Can you supply me a URL that I can check?

   Wing

   • Edit

5. 5 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 04:57 PM

   

   http://www.uta.edu/oit/digital

   • Edit

6. 6 Posted by Wing Ming Chan on Sep 04, 2014 @ 05:04 PM

   

   Let me understand you correctly. When you said header, do you mean the <header id="oit-header">? It seems to resize properly.

   One thing I noticed though is that the image wrapped inside h3 still has a width attribute and a style attribute. You might want to fix that first.

   Wing

   • Edit

7. 7 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 05:26 PM

   

   Now I get

   [cid:[email blocked]]

   • image001.png 10.6 KB
   • Edit

8. 8 Posted by Wing Ming Chan on Sep 04, 2014 @ 05:30 PM

   

   Are you modifying the meta tag now? Can we focus on the <header> section and the image inside the top h3 element please?

   Wing

   • Edit

9. 9 Posted by Wing Ming Chan on Sep 04, 2014 @ 05:33 PM

   

   I have just notice something. You still use a table for layout in the body, with width and so on. Is it a must? The left menu can never be hidden if it resides in a <td>.

   Wing

   • Edit

10. 10 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 05:35 PM

    

    No it was something from what I did before and it got fixed.

      Thank you it was the image and I removed it, and some of the sizing issue is gone.
      Any suggestions on what attributes an image should be given so it does do this.

    • Edit

11. 11 Posted by Wing Ming Chan on Sep 04, 2014 @ 05:41 PM

    

    You need to remove the width and height attributes from your <img> element. Specify max-width:100%; in your stylesheet instead.

    Wing

    • Edit

12. 12 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 05:42 PM

    

    I will do that. Thank you so much.

    • Edit

13. 13 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 05:43 PM

    

    What is the other way of doing that. It was easiest to put a table there.

    • Edit

14. 14 Posted by Wing Ming Chan on Sep 04, 2014 @ 05:51 PM

    

    You certainly want to use <div> and other html5 elements instead. Check out Emory University. I also started a demo subsite within in my site, though it is not finished because I moved my focus to web services instead.

    Wing

    • Edit

15. 15 Posted by Padmasolala, Ra... on Sep 04, 2014 @ 05:52 PM

    

    Thank you very much. I appreciate it. You can close this issue.

    • Edit

16. Charlie Holder closed this discussion on Sep 05, 2014 @ 06:11 PM.