Getting text to fit width of mobile browsers

[reefoid]

I've built a couple of sites recently which when viewed on a mobile browser the text reflows to the width of the screen as expected. However, I'm in the process of building another one and for some reason I cannot get the text to reflow, it stays the same width as a full browser which means lots of vertical scrolling.

I've checked my CSS and everything looks the same as previous sites so not sure what the problem is.

Relevant code is:

<div id="page">
  <div id="header">
    <div id="logo">
      <a href="/" title="#"><img src="/images/logo.jpg" alt="#"></a>
    </div>
    <div id="top_nav">
      <?php $top_nav = new Area('Top Nav'); $top_nav->display($c); ?>
    </div>
    <div id="top_separator">
    </div>
  </div>
  <div id="content">
    <div id="article">
      <?php $article = new Area('Article'); $article->display($c); ?>
    </div>
    <div id="right_col">
      <?php $right_col = new Area('Right Column'); $right_col->display($c); ?>
    </div>
  </div>
</div>

html, body {
	height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

body {
	padding: 0px;
	margin: 0px;
	background-color:#fff;
}

#page {
  width:960px;
  margin:0 auto;
}

#content {
  width:960px;
  margin:0;
  padding:0;
}

#article {
  float:left;
  width:700px;
}

#article img {
  margin-right:10px;
}

#right_col {
  float:right;
  width:200px;
  padding-top:15px;
}

Its the content in #article that will not reflow.

Anyone got any suggestions? I've tried changing the width of #article and #right_col to percentages but this makes no difference.

Thanks

 

[Dj_Jestar]

#page is set to 960px.

I've found it useful to never use px, always em or percentages.

 

[reefoid]

#page is set to 960px.

I've found it useful to never use px, always em or percentages.

I've always used fixed width for the first container element to ensure a consistent look across browser windows. Percentages can cause design issues I find. As for em, I only ever use this for fonts, is it suitable for use to set container widths?

Anyway, tried changing to both em and percentages but the text still doesn't reflow.

Should point out that in my last couple of sites I've also used a fixed width for the outer container and these reflow perfectly well.

 

[simisker]

Might be something to do with the floats.

Having said that, I echo Jestar's observation. Percentages are a godsend for mobile sites.

Don't forget you can also set the initial width and scale using the viewport meta tags.

EDIT: and you can target mobile devices using CSS media queries, too

 

[Dj_Jestar]

I've always used fixed width for the first container element to ensure a consistent look across browser windows. Percentages can cause design issues I find. As for em, I only ever use this for fonts, is it suitable for use to set container widths?

Anyway, tried changing to both em and percentages but the text still doesn't reflow.

Should point out that in my last couple of sites I've also used a fixed width for the outer container and these reflow perfectly well.

If you're using em/px/pt and set it to a size bigger than that of the screen, you'll get overflow, regardless of device Likewise with a 100%+ setting, of course

Remove the width setting on all elements and start from there.

 

[reefoid]

Might be something to do with the floats.

Having said that, I echo Jestar's observation. Percentages are a godsend for mobile sites.

Don't forget you can also set the initial width and scale using the viewport meta tags.

EDIT: and you can target mobile devices using CSS media queries, too

Tried removing the floats but still get same issue. Weird as the right column reflows perfectly, just #article that doesn't. Content is only <h2> and <p>.

I'll have a look at percentages at some point, its just annoying that I've never had to do any special styling on previous sites and they've all flowed perfect on mobiles and I'm using exactly the same styling here and it doesn't work.

 

[reefoid]

If you're using em/px/pt and set it to a size bigger than that of the screen, you'll get overflow, regardless of device Likewise with a 100%+ setting, of course

Remove the width setting on all elements and start from there.

Mmm, getting confused now. So how come on a previous site I had an element set to width:750px, similar layout to the code above, and the text reflows perfectly OK? Guess I need to go and do some reading up I guess

 

[simisker]

Odd.

Just in case: is your testing environment/device exactly the same as the last time you developed a similarly-coded site?

 

[reefoid]

Odd.

Just in case: is your testing environment/device exactly the same as the last time you developed a similarly-coded site?

Yes, all is exactly the same.

However, I'm now suspecting its to do with Concrete5. if I remove the Concrete5 php code and replace with plain text in a <p> tag, the text reflows as I want. Again, a bit weird as my last Concrete5 site works perfectly OK.

I shall investigate further.

 

[Dj_Jestar]

Mmm, getting confused now. So how come on a previous site I had an element set to width:750px, similar layout to the code above, and the text reflows perfectly OK? Guess I need to go and do some reading up I guess

Because 960px > 750px...

Seriously, stop trying to figure it out without actually figuring it out. Remove all width declarations, then add them one by one to see what causes the problem.

 

[reefoid]

OK, got it fixed. I removed all widths and started adding them in but was still getting the same issue. However, I noticed I had mistakenly put a fixed height on the article div in Concrete5. When I removed this the text flowed as i wanted. Not sure how setting the height attribute has prevented it working, but I've now changed it to a min-height and all works well.

I have taken on board everyone's points about widths so will be looking into this.

Cheers.