Typography not condensing enough for Iphone

[Beverleyh]

One thing I would like to know, is @charset “utf-8”; necessary in CSS?

It depends on if your server already sends those headers (you can set it in .htaccess) and if you encode your CSS file as utf-8 while saving. There are other factors too, and I’m no expert in character encoding, but I personally have never used it.
Further info: http://www.w3.org/International/questions/qa-css-charset and https://developer.mozilla.org/en/docs/Web/CSS/@charset

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.

Yes, backups are good. Always make those.

what method would you use to make sure it’s all good first…

It depends how you like to work – you could make a complete backup of your website on a subdomain, or have a Git setup that you can branch, or just copy the files you’re going to edit into another folder on your computer. The last option could be fine in this case.

For now, concentrate on moving those internal styles from the head into ‘fluid.css’ so that you can resize the h1 / h2 titles. And also fix the missing curly bracket in ‘boilerplate.css’ that Aterlierbram pointed out to see how that affects things.

[Atelierbram]

I took Dreamweaver’s basic fluid layout to begin with, since I was learning fluid layouts

@susannb If I understand correctly you are trying to learn responsive webdesign, and I don’t know your situation, but I think this is admirable, if not something to be underestimated. Not to discourage you, but I have seen too many people giving up over here after hitting a wall, thinking media-queries were too difficult. Well it can get complicated very fast, but you needs some tools to help you out. Since you write you are a visual learner (aren’t we all in some way or another?), be sure to get yourself familiar with Chrome DevTools, or an equivalent in another browser like the one in Firefox, if you aren’t doing this already. Drag your browser window around with DevTools open, and see what elements change at which breakpoint, and then look up that element that you want to edit in your stylesheet; again, if you aren’t doing this already.

In this stage of development it would be best if you could pair up with a more experienced webdesigner. Ideally someone who had access to the same files you were working on (have to look out for different versions, hence the Git remark from Beverleyh), and leave comments right there in the code. This can partly be achieved over here when you make small demo’s in, let’s say Codepen, but like you wrote, you have a complete website with multiple pages to consider.

I used what Dreamweaver gave me and fiddled with it from there.

Now it’s a good time to start thinking about how you would like to set things up, (also regarding my comments above) in stead of what has been assumed by some general template from a text-editor. This is also a chance to get specific and make the most of your CSS; like having reusable code and the cascade work in your advantage in stead of fighting it (specificity).

[SusannB]

LIP_lostinprogramming, THANKS for the email, not sure how to read it though. I thank you for taking the time to try to help me but I am lost….

The “clearfix” fyi, is needed because of something I created in the header and the fonts, to make it look better. When I took it out, it looked awful!

I will get my head around all this information and work at it one step at a time.

Also put in the closing bracket that was needed and it changed the header colors all funky…another thing that is broken when fixed properly.

Bear with me….

[I.m.learning]

I changed my post, I was messing around a bit and tried to validate both your html page and the CSS and it’s truly a challenge. Because you are using different stylings, one may be affecting the other.

It’s almost as if you created a masterpiece using different arts.

As we mentioned before too, some of your CSS has errors and it’s important to fix those and see what happens-and I just read it messed it up.

[SusannB]

LIP_lostinprogramming, thanks for messing around.

I want to start by fixing just the header part, if I can and go from there. I know that the clear fix will mess things up, so will try to keep that.

Someone taught me how to do the fonts on the page I set up as the “stylesheet.css.” I think there is lots of good information here, just a bit overwhelming.

Let’s not worry about all my errors for now as it seems to render for the most part just fine.

:)

[I.m.learning]

Yeah, as you stated, “fixing” the errors made it worse. I didn’t want to say it; but was thinking have you start from scratch, but, for the most part, your site works.

It is definitely overwhelming but know there are many websites that will offer working examples, also you can manipulate those to get a better feel for how it will work.

I don’t recall this in the discussion: how are you testing your pages? Do you have the site pages set up on your computer to check the results and then uploading to the server?

[SusannB]

So I will start with what Atelierbram suggested and Beverleyh at this point.. :)

Thanks…will update when I know it’s working and see if there are any other suggestions at that point.

Sue

[Author]

Posts