Typography not condensing enough for Iphone

[SusannB]

Can someone please help me fix this problem?

It looks good on Tablet, Computer but on an Iphone (not the big one) the two top fonts do not condense enough (like two characters are not shrunk enough into the space and I cannot for the life of me figure out how to fix it. (I’m new to CSS and fluid layouts)

Two top lines are H1 and H2.
http://www.brucebrodydc.com

[I.m.learning]

On my phone, and when minimizing the browser, the image and background color disappears, is this just me?

[SusannB]

Yes, did that to help with faster load time.

Need help with the fonts though….the top two lines.

[Beverleyh]

CSS properties that you might want to look in to;

font-size http://www.w3schools.com/cssref/pr_font_font-size.asp
line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp
letter-spacing http://www.w3schools.com/cssref/pr_text_letter-spacing.asp
white-space http://www.w3schools.com/cssref/pr_text_white-space.asp

Have a play. Change/add the values to your stylesheets. Combinations of these should help.

[Atelierbram]

There is a class of clearfix set on the gridContainer, but not declared in the CSS, and white-space: nowrap; set on #header (and inherited by all the headers) is not within a media-query. Because of the large font-size and the headings not wrapping, this causes the overflow on small screen sizes.

So when the white-space: nowrap; kicks in on a wider screen: is within a media-query, this issue will be solved:

@media only screen and (min-width: 480px) {
  #header h1,
  #header h2 {
   white-space: nowrap; 
   }
 }

http://codepen.io/atelierbram/pen/qNdQaw

And yes as Beverleyh suggested, better use the line-height and padding properties in CSS ISO height on text.

[SusannB]

Thanks, I love the explanations! You two rock!

I will have a go at this.

I took Dreamweaver’s basic fluid layout to begin with, since I was learning fluid layouts, so I have several css style sheets.
Which one do I alter or put the information into?

I have boilerplate.css, fluid.css, stylesheet.css and then the html.

[Atelierbram]

For optimisation what I would do is move all the styles over to fluid.css, get rid of the inline style-block in the HTML head. Save a few so-called http-requests, and by doing so make the very first loading of the site faster. Those @import statements loading the stylesheet with the (webfonts) font-face declaration are also rather costly in terms of rendering, so by having just one stylesheet this would not be needed. Just have the font-face declaration on top of the one stylesheet (or use Google webfonts like I did in the Codepen demo).

BTW there is an error right in top of boilerplate.css (the fontface-declaration missing a closing curly bracket }) preventing (all? or) at least the clearfix styles from rendering.

There are more issues with the CSS like using ID’s in the CSS ISO classes (extreme hight specificity making it difficult to override), the long line-length of paragraph tags, (make the text more difficult to read). Also in the HTML markup, for example the header could be just that in the markup header ISO a div, but that maybe something for another thread.

[Beverleyh]

As Atelierbram already noted, there is white-space:nowrap; declared against the #header element, which is in turn
being inherited by the fancy h1 and h2 titles that are sat inside of it. This particular declaration is towards the top of the fluid.css file, so if you take that line out, your titles will at least wrap on small screens. Note that there are additional height declarations that will make the titles wrap awkwardly, but you can tackle them along with their font-size…

Font-size next – that is declared internally in the head of the web page (along with those hinky title heights). Firstly, try moving all those internal CSS declarations into the fluid.css file – at bottom of the ‘Mobile Layout’ block, but above the ‘Tablet Layout’ block. Then maybe make the h1 and h2 titles a tad smaller by reducing the font-size values (46px/36px). Also remove the height declarations and switch to line-height instead. You’re working ‘mobile first’ so if you get the titles set up for small screens first in the fluid.css stylesheet, you can redeclare the h1 and h2 font-size later on in the ‘Tablet Layout’ block to make them bigger again for larger screens.

Now, I don’t use Dreamweaver myself so I’m unsure how it breaks down the stylesheets, or what it gives you as a default layout, but you should be able to merge the CSS into one file. As Aterlierbram already stated, cutting down on HTTP requests (i.e. Any links to stylesheets, images, JavaScript files, etc) will help with load times, and squishing multiple CSS files into a single stylesheet is one of the easier ways to achieve this.

Hope that helps

[SusannB]

So I’m all into doing all that you said, from both of you, but to be sure not to break the website while doing this, what method would you use to make sure it’s all good first….

And thanks for being willing to teach me :)

[I.m.learning]

I noticed this in the fluid.css [note the margin-left]:

#header {
    clear: both;
    float: left;
    margin-left:
    text-align: center;
    white-space: nowrap;
    text-align: center;

}

Still in fluid.css

I was curious about the media queries. I see a comment about Mobile Layout: 480px and below. But do not have a media query set. Wouldn’t that mean it’s set for the page, regardless of size?

Under that is Tablet Layout: 481px to 768px., and have a min-width set at 320px.

An after that, Desktop Layout: 769px to a max of 1232px. And a min-width: 769px

I only used a media query for under 990px (tablet size) just because I still don’t really understand how these work (and just heard of them a couple months ago).

But, wouldn’t having different “min” sizes with no max be conflicting?

I use 2 queries, one being:
/* when reaching to tablet size, change to:*/
@media screen and (max-width: 990px)

---

Like I said, I’m really unsure how these things work But know you can set a min and max width for each query.

I just think all the styles not being used can be omitted from the code and to make sure there aren’t more than one style attached to each entity. You’re worried about breaking anything, if you copy/paste the codes from each source and attach them to one style sheet, nothing is going to break because it’s the same code.

What you’re doing is getting the chance to look at everything on one page and determine what is being used and how. Just make sure to remove the style sheets unused and to keep the link to the one page you are using active.

[SusannB]

LIP_lostinprogramming, I have no idea. I used what Dreamweaver gave me and fiddled with it from there.

As far as breaking something, yes, when pulling it all together or changing some of the items, it can break the whole site. So rather than do that, I was asking for help, like if there is a specific order things need to be in and that kind of stuff.

If if I should make a back up copy first, play with it in a subdirectory before putting it into the main. Once you mess with the css sheets, it messes the whole site since it’s attached to every page (except the ones that I haven’t made yet.)

That’s where I am making my inquiries, steps to ensure I do it right since I know that I need to do all these things to make the site better.

I’m a visual learner, so the more information I have to go on the more confident I will be along the way.

:)
Sue

[I.m.learning]

You might have issues combining ALL styles, but shouldn’t have much issues when just taking the styles from the HTML and putting them in the fluid.css.

[Beverleyh]

@LIP_lostinprogramming

I’m not sure that asking people to email you is a good thing in the long run. I mean, it’s great of you to offer again, but why close doors when Sue (and other members) can benefit from the combined experience of many talented web developers by continuing to post in the public forum. And when other developers post responses, we in turn benefit from the comments and suggestions of our peers. Win-win.

Why not post what you have in one of the developer playground – CodePen, JSBin or JSFiddle? They’re free. Or, you have your honestlee.info website yes? Why not upload a zip to some temporary folder there and get some helpful feedback along the way too?

[I.m.learning]

I edited my post (about 20 times). I don’t know why, but I cannot use Codepen. It either does not let me save it, or it stalls on me.
I’m looking for something else, but many want you to pay.

I thought JS bin was for javascript only

[I.m.learning]

One thing I would like to know, is @charset “utf-8”; necessary in CSS? I haven’t used that in over 5 years.

[Author]

Posts