Welcome to WebmasterWorld Guest from 54.145.235.72

Forum Moderators: incrediBILL

Web site not resizing in mobile

   
3:16 am on Sep 28, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My web site doesn't resize itself to fit in a mobile window. I have the width 1000px wide, is this the problem? It hasn't been in the past. Any other ideas?
5:03 am on Sep 28, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Are you using a 'viewport' <meta> tag or media queries in your stylesheet(s)? Either of those could cause this issue.
6:18 am on Sep 28, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Uhm... You mean you want it to be 1000px wide, but not really 1000px? Just some of the time? Do you have anything in the site code that says "I was just kidding about the 1000px, you can go smaller if you have to"? Is it {width} or {max-width} ?
9:43 am on Sep 28, 2012 (gmt 0)



To me 3 weeks of intense learning an coding to get mobile friendly, you're asking the 1st question, think flexible themes
3:51 am on Nov 3, 2012 (gmt 0)



Add this in your header before the head tag
<meta name="viewport" content="width=device-width" />
Hope that helps!
5:41 pm on Nov 3, 2012 (gmt 0)

WebmasterWorld Senior Member



I have the width 1000px wide, is this the problem?


There is currently no cut and dry solution for mobile but some methods are more flexible than others. If you want to use only one site for both desktops and mobiles you should adopt "em" units of measurement instead of "px". You can apply ems to fonts and element widths and heights. That way, as viewports shrink in width from desktop to mobile sizes the page just collapses vertically without losing its format. It's still not an ideal if your page is image intensive but it's the best of the available options that I have used for my minimalistic design approach.

You will need to define your maximum width for your master container though for desktops such as max-width:95em; -- that will keep your layout from exploding on current desktop widescreens.

Designing like this is somewhat of an inside out way of thinking because traditionally we drew boxes and then stuffed them with content. Whereas with ems you have to think in terms of going from the centre of the box (the text and inner most divs) outward. Ah how about this; using pixels as a unit of measurement confines you to a rigid shoebox whereas ems is like a flexible balloon according to the viewport size.

I will caution you about ems though. If you aren't aware of the shortcoming of nested elements adopting their parent sizes and adding it to there own you can really be left scratching your head in frustration. Apparently there is now a fix for that with the new "rem" unit of measurement but I haven't tried it yet so I cannot comment on it other than to say it doesn't yet work in Internet Explorer 8 so you would need to implement a fallback for that -- too much work as far as I'm concerned. I'll just stick with ems until browser support catches up.

As scooterdude points out, learning to adapt your coding styles to accommodate mobile users is well worth the extra effort these days.

Last point -- pixels are ok on all up-to-date browsers because of the zoom factor -- the CTRL + - feature, but not everyone is aware that they can zoom in and out plus I'm not sure what it's like on mobile. I've seen people pinch and squeeze in or out on mobiles so I guess that's the equivalent? I get by on mobile but by no means an advanced designer so maybe someone can refute what I've said -- constructive criticism is always welcome!
2:21 am on Nov 4, 2012 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Add this in your header before the head tag
<meta name= ...


all meta elements belong within the head element, not before the head tag.
4:33 am on Nov 4, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



in your header before the head tag

If it's before the head tag it isn't in the header ;)
9:07 am on Nov 4, 2012 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



"header" is ambiguous here.

"header" could mean the "header include file" which might include the document head and/or the document's "header" section which would of course be within the body.

according to W3C:

- in HTML4 "header" is the <head> element

The global structure of an HTML document:
http://www.w3.org/TR/html401/struct/global.html [w3.org]

- in HTML5 "header" is an element used for a section's heading, which isn't necessarily the same as the document's header

HTML/Elements/header - W3C Wiki:
http://www.w3.org/wiki/HTML/Elements/header [w3.org]
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month