html - Can anyone help me understand why my CSS won't work on 1 specific wordpress page -
i have wordpress page works except latest pages i've added it. custom css in wordpress did work until stopped working , have validated css file no error.
here .css file (or parts of edits today):
.page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #bigbox { width: 100%; height: 850px; background-color: #222; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 h1 { margin-top: -40px; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 h2 { margin-top: -30px; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #scrollline { width: 100%; height: 350px; background-color: #222; position: static; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #product { width: 23%; height: 340px; background-color: #333; margin-top: 5px; margin-left: 17px; display: inline-block; position: static; border: solid 1px #bf4d28; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #productpack { width: 48%; height: 340px; background-color: #333; margin-top: 5px; margin-left: 17px; display: inline-block; position: static; border: solid 1px #bf4d28; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #name { width: 90%; height: 40px; background-color: #222; margin: auto; margin-top: 10px; text-align: center; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #image { width: 200px; height: 200px; background-color: #222; margin: auto; margin-top: 10px; text-align: center; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #imagepack { width: 400px; height: 200px; background-color: #222; margin: auto; margin-top: 10px; text-align: center; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #downow { width: 90%; height: 40px; background-color: #222; margin: auto; margin-top: 10px; text-align: center; font-size: 24px; text-align: center; color: #bf4d28; transition-duration: .5s; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 .norm { margin-top: -5px; } .page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 #boxhead { width: 75%; height: 50px; text-align: center; margin: auto; margin-top: 10px; }
it excact same thing these 4 pages. when had 3 pages worked fine went hell when added 4th , css stopped working alle of pages .
link site can se problem: http://www.the-prototype92.com/planetary-rings/
i'm using google chrome btw :)
if had guess i'd you're confusing selector chaining.
.page-id-1276, .page-id-1282, .page-id-1284, .page-id-1287 h1 { margin-top: -40px; }
this saying have -40px margin classes .page-id-1276, .page-id-1282, , .page-id-1284. give h1 -40px h1 tags found in .page-id-1287.
i think meant this:
.page-id-1276 h1, .page-id-1282 h1, .page-id-1284 h1, .page-id-1287 h1 { margin-top: -40px; }
which applies examples gave. if wrong , did indeed intend select things way, let me know , revisit this.
Comments
Post a Comment