Thanks a ton Scarpato.

 
Rabell: Looks nice but it’s not free and i’d rather learn the basics than use something custom made

Smallin: Just trying to figure out what the traditional way is of styling a bar

Bundren: Yeah, I’d say a raw element is totally fine. stretching an SVG image might maybe offer a bit more control, but only if you were wanting to get fancy w/ the shape

Bundren: Maybe put some text in there to be kind to accessibility stuff

Gibas: Is there a guide to help me build example 2 without using a checkbox?

Spead: Http://callmenick.com/post/css-toggle-switch-examples

Hodosy: Hm, i wonder if using google fonts is the one messing up my container widths and not allowing me to set max-width! :

Adami: Possible, google likes to butcher fonts and the css used for them

Jumalon: Use the author’s font file, not google’s copy

Clerkley: You mean locally, right?

Barbuto: And use http://reisio.com/examples/webfonts/ or http://reisio.com/examples/webfonts/new/

Borst: No I mean find the font author’s website

Tinnerello: And download the actual font file ttf/woff/etc. from there, not from google

Pelyo: Yeah, htat makes sense.

Sonnefeld: They apply some treatment to them all and it’s. unreliable

Waterer: Just like all things google :p

Brummer: Claytonzaugg: why without a checkbox?

Nordon: Http://reisio.com/temp/google****upno87456/

Baisten: Because I’ve got serious checkboxes that are rampant in my js file, and code applies to all of them, which destroys example #2

Diles: So I’m tyring to do just a basic on off switch that looks like that, no animation necessary

Loch: You can override for example 2

So: Just use a more specific set of selectors

Everhardt: Reisio, CSS Specificity • Tutorials: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html , http://htmldog.com/guides/cssadvanced/specificity/ • Spec: http://w3.org/TR/CSS21/cascade.html#specificity • Graph yours: http://jon***ebastianohlsson.com/specificity-graph/

Sepich: Nope, it wasnt google fonts! :

Losiewski: I set max-width: 100px; in my body elements css. but my p tag wont use it! :/ so weird.

Coman: Cant figure out why. dont even know if this is a browser specific issue.

Trucchio: The css google serves is also *****

Kolbe: Im not using any google fonts

Alexanders: My css looks alright. my html looks alright. its crazy :/ dunno what the problem is really.

Cramm: Reisio: see if you can help – https://jsfiddle.net/rzgjs1cw/

Scarpato: Supay: https://jsfiddle.net/rzgjs1cw/3/ you need spaces to break lines, normally

Scarpato: Otherwise you need word-break: break-all https://jsfiddle.net/rzgjs1cw/4/

Kos: Scarpato: hm, no actually, i want everything to use a certain width. and not more. but my p tag doesnt seem to care.

Scarpato: Right, because you have no spaces in that p tag, so it doesn’t wrap like it would with normal words

Reppucci: Oh wait, youre saying that i missed the ‘word-break: break-all;’ ?

Knolton: Interesting, i dont remember using this tag previously, but it used to work.

Oum: Scarpato: ah, i remember using a custom tag called ‘main’ where i set max-width, margin and other properties. then i just used main/main and had all my content within those tags. that used to work, but it doesnt now. :/

Scarpato: Well, again, any tag with a long string of one word won’t break at the end of the element

Scarpato: It only breaks on spaces and a few other non-letter characters

Goldschmidt: Now i understand what youre saying

Alberthal: Epic, i didnt know that breaks only occured at such points. lol, silly me. i was testing with that huge string and nothing was working.

Chkouri: Thanks a ton Scarpato :