[nesciens]

If the default font size of the browser is not 16px (or if the minimum font size is greater than 10px), some bad looking things happen. This can be reproduced with Catch Everest 1.1.2 by going to the live preview with such settings.

(For a larger default font size, white bars start to appear along the slider for large resolutions, which looks ugly. Moreover a horizontal scrollbar may occur. For a smaller default font size, the sidebar can be forced to be diagonally below the main content area.)

The problem is that the width of #primary and #secondary are set in pixels, while the width of .site and the padding of .container are set in rem-units. These do not match up when 1rem is not 10px.

Changing these values to rem seems suboptimal as the responsive CSS uses pixel-based sizes of devices. Hence I think the most sensible thing is to change these values to pixels.

This I did in a child theme.
In child/functions.php: http://8f6335cf4c8db481.paste.se/
In child/style.css: http://637bc77783a56262.paste.se/
In child/css/responsive.css: http://92e07d4381ab5073.paste.se/
Let’s hope I didn’t make any typoes in those pastes.

It would be nice if this or a different fix could land in the next version.

[Sakin]

@nesciens: function.php is useless. You can just delete that and add all the css in your child theme style.css . When you are not disabling responsive, you don’t need to separate the css.

So, just delete your child theme function.php and merge your child theme responsive.css to style.css

Then send me your site URL. I will check in.

[nesciens]

@sakin: Here are some fresh WordPress 3.5.2 installs:
http://www.ixsop.nl/ce1/vanilla/
http://www.ixsop.nl/ce1/a/
http://www.ixsop.nl/ce1/b/
http://www.ixsop.nl/ce1/c/

Vanilla is just Catch Everest. At http://www.ixsop.nl/ce1/vanilla.png there is a screenshot. Notice the white next to the Mount Everest picture and the scrollbars. This is taken with Firefox with minimum font size set to 12px (in Preferences -> Content -> Fonts & Colors -> Advanced -> Minimum font size).

A is the same as Vanilla, except that I added “html { font-size: 15px; }” to the custom css theme options, so that you do not have to go into your browser’s settings to see the effects. There is a screenshot at http://www.ixsop.nl/ce1/a.png . This CSS corresponds to setting the default font size to 24px (in Firefox at Preferences -> Content -> Fonts & Colors -> Size). (In Catch Everest’s style.css there is “html { font-size: 62.5%; }” and we have 62.5%*24px = 15px.)

B is A with my CSS all in style.css as suggested. This works fine as long as responsive.css does not kick in: http://www.ixsop.nl/ce1/b-normal.png . Things, however, go wrong again when the screen-width goes above 1190px or below 1060px: http://www.ixsop.nl/ce1/b-resp1.png and http://www.ixsop.nl/ce1/b-resp2.png . The problem is that my style.css in linked in the html before Catch Everest’s responsive.css is linked:

<link rel='stylesheet' id='style-css' href='http://www.ixsop.nl/ce1/b/wp-content/themes/child/style.css?ver=3.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='catcheverest-responsive-css' href='http://www.ixsop.nl/ce1/b/wp-content/themes/catch-everest/css/responsive.css?ver=3.5.2' type='text/css' media='all' />


C is A with my CSS arranged as I originally posted. As far as I can see it works correctly: http://www.ixsop.nl/ce1/c-normal.png , http://www.ixsop.nl/ce1/c-resp1.png , and http://www.ixsop.nl/ce1/c-resp2.png .

(Well, actually the text in the slider can overlap with the menu in all cases, but I would argue that that is because 24px is a rather extreme setting, as 16px is standard.)

[Sakin]

@nesciens: Sorry I don’t understand all these. Can you tell me what are you trying to do in your site?

[nesciens]

I’m just reporting that Catch Everest looks bad when Firefox’s default font size is set to anything that is not 16px or when Firefox’s minimum font size is set to anything bigger than 10px.

I believe this is a minor bug and should be fixed. Since I couldn’t find a bugtracker, I posted here.

The child theme is a workaround.

Dumping everything in my child theme’s style.css does not work.

[Sakin]

@nesciens: Ok thanks I will check with my development. Do you have any suggestion?

[Author]

Posts