Simplified responsive header logo image and text

Continuing the discussion from Help needed on mobile menu:

@graecille, Let’s address the easiest issue first.

As you probably know, one can tell Firefox to “Zoom Text Only”. That is a great feature for allowing developers to test how the page will behave if the user sets a font size that is larger or smaller than the one being used by the developer.

If it is not already enabled, please take a moment and turn on the Zoom Text Only feature.
View > Zoom > Zoom Text Only

From the keyboard, one can hold the CTRL key down and rotate the mouse wheel to zoom the text. CTRL+0 resets the font-size to your default. Remember to reset to zero occasionally. It’s easy to forget that the text size has been zooomed :smile:.

Open the Services page and set the width of your browser window to less than 960px or just before the text beneath the logo wraps, then with Firefox, Zoom Text-Only a couple or three clicks larger. You will see that the sentence below the logo image overlaps the blue background of the menu bar.

The lesson here is that one should avoid using fixed heights on a web page.

The majority of changes on the HTML and CSS files attached focus on the header section which should be suitable for use on all of the site’s pages. Several appearances in media queries have been eliminated by using percent margins/paddings in styles.css instead of fixed margins/paddings throughout. The only responsive change remaining reduces the font size of “h1” slightly.

If you are satisfied with the look and behavior of the logo section, please delete the commented-out portions of code from the stylesheets. That will reduce their bulk. You can retain any useful comments, of course.

The text in the body of the page is mostly set with fixed units such as points (a print unit) and px. They should be changed to ems asap. (7.3 KB)

CTRL is used to zoom in/out not shift :wink:

1 Like

Yeah, I worked that out. I see what you mean. I have a meeting to go to now, so may not be able to do it tonight. I will then do it tomorrow morning. So I assume you want me to download the zip file as last time and upload the relevant files and see how we go. Correct?

Thank you, @Zubair_Abbas. I edited my post to correct that error. :slight_smile:

1 Like

Yes, that’s the game plan. Try before you buy :slight_smile:

1 Like

HaHa, will do. Off to my meeting now.

Hi Ron,

Ok, all new CSS files loaded up and the ```

``` put in the Promo area on all pages. As far as changing all the px & pt to ems go, I understand these refer back to a base body px size. What size where you using in the few ems you have added?

The header portion of the Service page looks as intended. The space to the left of the logo image and the amount of indentation and vertical space around the text beneath the logo image look good. If you have set up Firefox so you can use the Zoom Text Only feature, then you should appreciate the difference in coding within a fixed height container and allowing the content to “go with the flow”.

The font-size in the body tag is set to 100%; therefore, the font-size becomes whatever the user’s default font size may be. My font-size (I think it is the default in Firefox, but not sure) is 16 whatevers. If my default font size were >16, the text with ems would be larger, and likewise, if my default font size were <16, the text with ems would be smaller. User’s choice. The user can make a blanket change as desired.

I can convert the existing px and pts to em equivalents so your font-sizes will not change unless the user’s font size is different from yours. If you don’t like them, you can change them to suit yourself.

The highlights of the header section with the new CSS are (1) less CSS (2) fewer media queries (3) percent padding and margins shrink at narrow widths and expand at wider widths without media queries (I got a little ahead of schedule and rewrote the margins/padding around #bookcontent also) (4) the header text no longer overlays the menu at larger font sizes or when wrapping.

See if you agree with that and if it suits you.

During the next planned step, we will play with Firebug a little.

How is this working for you? (or not)

No - em refers to the size in the immediate parent.

You should not have a px on the body at all - for ancient IE you might need to specify 100% there but never px.

1 Like

Thanks Ron, So are you saying you want me to now go thru all the styles and the responsive styles CSS and change all/most to ems or you will?

I found a site whereby I can download a spreadsheet of ems, percent & points equivalents. I assume this will do the job?

It does look good though. I see now when I do the Zoom trick, it only overlaps the menu when you go to extreme size increase so that’s good.

In the top portion of the page where the logo is located, there should be NO overlapping of text and menubar at any “reasonable” size. If you see an overlap, then either some code is not the same as mine or I need to see a screen shot. This screen shot shows the max size that I can zoom, perhaps yours is larger? Anyway, this would be pretty extreme :slight_smile: Granted, at a narrow enough width, expremenly zoomed text may overflow the edge of the page and generate a scrollbar.

The boxes in the middle portion of the page suffer from a different (font-size related) issue which we will address later.

I probably use a text file equivalent of that spreadsheet.
Some important points to keep in mind when converting from fixed units to ems are, as @Felgall pointed out, ems are a relative unit of measure. Ems behave the same as percents. Sizes are relative to the size of their parent’s font size. The outer or first level of em is relative to the font-size in the body tag, which, as @Felgall mentioned, does not have to be expressed if it is the same as the user’s default. I chose to express it as 100% to emphasize that I changed it from the fixed 11pt that you had (My choice of 100% also makes it potentially 1/12 larger than 11pt.)

When I am converting a site from fixed font-size units to ems, I usually use a strict px to em conversion (1/16ths) or pts to ems (1/12ths) for the first generation of font sizes but not necessarily so for nested ems. Because of they way font-sizes are calculated/scaled as if they are percents, continuing to adhere to conventional fractions any deeper than the parent generation is silly. That’s just me. Others differ.

Remember inheritance and avoid assigning font-sizes unnecessarily.

The best way to learn is by doing so give it a go. Someone here will be glad to help if it becomes confusing.

Hi Ron,

That has all been done to both styles and responsivestyles and uploaded. Please check and advise if I have done wrong or missed anything. In fact in thinking, I think I had to leave the 960px wide as when I put an ems equivalent here the width went all to pot. Everything else appears to look ok.

Oops, it looks like you changed more than just the font sizes from px to ems.

There is a bit of discretion involved when choosing units of measure for widths, margins and paddings, as opposed to font sizes.

Parts of what you have done look very good, but some parts miss the boat, IMO. I’ll need some time to look this over and think about how it works.

Sorry about that Ron! I thought you meant all.

Hi Ron, Were you waiting for me to get back to you with something? I have been away on holiday.

Hi, graecille, welcome back to the land of the laborious. :slight_smile:

I’m not exactly sure where we/I left off. I was probably hoping that you would be able to revert to your previous CSS file, but you went on vacation instead.

If you can back up one revision of your CSS then change only the font sizes from px to em that would help, otherwise we can just move forward from here.

PS: hope you had a great holiday (envious) . :slight_smile:

Hi Ron,

I have uploaded both the CSS files again. Basically I reverted back to the last file you sent me and changed any fonts and pts to ems that wern’t already changed by you. I think you said “rule of thumb” was ems for fonts only and px for all padding and margins - is that correct?

Sorry to be slow getting back with you. I’m reviewing your files to see where we left off. I’m sure that I had a direction in mind at the time… I just need to remember what it was.

If you reword that “rule of thumb” so it says:
“only ems (or rems or percents) for fonts and anything for padding and margins as works best in the layout”
it would be more correct.

If we can talk our way through some of the recommendations for you pages, you’ll see what I mean and why.

Hi Ron,

I think after you asked me to do both CSS files to ems, I think you were then going to talk about Firebug?

At present, I have the three similarly framed pages, home, aboutus and contact, framed satisfactorily. I’ve not given the form-in-a-table on the contact page any attention, yet. It looks OK as it is, but it would be nice to improve the construction and semantics of the form.

I want to look at the services and projects pages next. They shouldn’t take long.

The projects page offers a two useful examples of evaluating/troubleshooting using Firebug. It will take some time to assemble some screenshots to help you follow the train of thought, but should be worth it if you need the detailed guidance. I am assuming that you have little or no prior knowledge with Firebug. If you do, let me know so I don’t become too elementary.

Is any of the CSS superfluous? So far, there seems to be a fair bit that is not used. I will likely delete or comment out the rules that seem to have no use. In that way, you can restore whatever you need that I am not aware of.