2K11: Style in sidebar does not survive resizing

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

2K11: Style in sidebar does not survive resizing

Post by kybernator » Sun Nov 03, 2013 9:55 pm

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: 2K11: Style in sidebar does not survive resizing

Post by Don Chambers » Mon Nov 04, 2013 12:12 am

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;}

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: 2K11: Style in sidebar does not survive resizing

Post by kybernator » Mon Nov 04, 2013 12:22 am

Don Chambers wrote:(...)

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.

User avatar
yellowled
Regular
Posts: 7078
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: 2K11: Style in sidebar does not survive resizing

Post by yellowled » Mon Nov 04, 2013 7:49 am

Don's suggestions should do the trick, just to clear this up:
Don Chambers wrote: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.
Don Chambers wrote: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
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: 2K11: Style in sidebar does not survive resizing

Post by Don Chambers » Mon Nov 04, 2013 7:03 pm

See? I knew you could answer more accurately!! :mrgreen:

Post Reply