2K11: Style in sidebar does not survive resizing

[kybernator]

I have styled an unordered list in a HTML-Nugget with

Code: Select all

#sidebar_right ul.logofont {
    font-family: [fontstack];
    font-size: 1.7em;
     }

When I make the browser window much narrower, to get an impression how the page will look on a mobile, the text thus marked gets moved down (which is good) and also loses its font (which is slightly less good, even though, technically it obviously isn't in "sidebar_right" anymore...)

See at http://www.ev-ref.de

Any advice? The list items will become links later, btw. I do suppose I am doing something wrong, but have no idea what.

Also, if someone could give me a hint, if it is easy or obvious for you, how to avoid a colorchange in a:hover within h1 only, it would be appreciated. (I suppose, having it change to the same color it already has, but how do I do that? My CSS usage is mainly based on trial and error. About the same amount of trial and error, actually.)

Regards, Bernhard

[Don Chambers]

Yellowled can probably answer this more accurately..... however...

I believe the 2k11 template is "mobile aware", meaning if a mobile device is detected, the layout changes accordingly. I believe the mobile layout shows content first, with sidebars below main content.. Therefore, reducing the size of your non-mobile browser isn't really going to emulate what your site will look like on a mobile device.

I think the reason you are losing your font when your browser window reaches a certain size is because you defined it here in your user.css file:

Code: Select all

@media only screen and (min-width: 768px) {

Did you deliberately put that code in this part of user.css? Locating it outside of that block of css should preserve the font-size you have defined.

Also, if someone could give me a hint, if it is easy or obvious for you, how to avoid a colorchange in a:hover within h1 only, it would be appreciated.

If you are trying to change the link color in the header h1, this should work:

#identity a:hover {color: #660066;}

[kybernator]

(...)

I believe the 2k11 template is "mobile aware", meaning if a mobile device is detected, the layout changes accordingly.

Yes, that's why I love it.

I think the reason you are losing your font when your browser window reaches a certain size is because you defined it here in your user.css file:

Code: Select all

@media only screen and (min-width: 768px) {

Did you deliberately put that code in this part of user.css? Locating it outside of that block of css should preserve the font-size you have defined.

D'oh. Yes, of course. The min-width was part of the auto-generated code, IIRC.

I applied both your suggestions and they work like a charm, thanks so much, Don.

[yellowled]

Don's suggestions should do the trick, just to clear this up:

I believe the 2k11 template is "mobile aware", meaning if a mobile device is detected, the layout changes accordingly.

2k11 actually does not detect devices or browsers, it only detects the screen width (through the viewport meta element) and features supported by the browser (through Modernizr). The CSS then “reacts” to those using @media queries and (if necessary) the classes generated by Modernizr.

Therefore, reducing the size of your non-mobile browser isn't really going to emulate what your site will look like on a mobile device.

Yes, it is. Resizing a desktop browser is not an exact emulation of how the site will look in a mobile browser, but it's close enough for testing basic stuff like layout and typography.

YL

[Don Chambers]

See? I knew you could answer more accurately!!