The reason the background repeat only happens when the screen gets smaller is because of where you put the CSS
HTML Code:
div.post table {
background-repeat: no-repeat;
}
Lets take a look at how I know what is happening.
1) I went to the page in question and used the browsers developers tools to view the page source.
2) I copied the source to a text file.
3) I looked thru the source for teh Atahualpa CSS (it starte with:
HTML Code:
<style type="text/css">body{text-align:center;margin:0...
and there is a lot of CSS)
4) I copied all the Atahualpa CSS to another file (to make it easier to look at)
5) I did a global replace of '}' with '}\r' - the '}' is the end of a CSS statement and the '\r' in my editor is a new line which makes everything easier to read.
6) I went to the end of the CSS because that is where the 'CSS Insert' option's CSS goes. I then prettied up the CSS to make it even easier to read and here is the very end of the CSS:
HTML Code:
@media only screen and (max-width:767px) {
#text-3 .textwidget {
font-size:.5em;
font-family:"Times New Roman",Times,serif;
}
h1 {
font-size:24px;
line-height:1.2;
margin:0.3em 0 10px;
}
}
@media only screen and (max-width:767px) {
#text-13 .textwidget {
font-size:.001em;
font-family:"Times New Roman",Times,serif;
}
div.post table {
background-repeat:no-repeat
}
</style>
so you see that the first line is
HTML Code:
@media only screen and (max-width:767px) {
so everything in that block applies to it - everything from the '{' to it's closing '}'
Then you have a second @media block which is:
HTML Code:
@media only screen and (max-width:767px) {
#text-13 .textwidget {
font-size:.001em;
font-family:"Times New Roman",Times,serif;
}
div.post table {
background-repeat:no-repeat
}
</style>
and here I'm showing th </script> which is the end of the Atahualpa CSS. Now note two things
1) there is no closing '}' for the @media block
2) the 'div.post table' block is there. because there is no closing '}' for the media back, everything till the end of the CSS is assumed to be part of that block which means the 'background-repeat:no-repeat' only gets applied when the screen width is less than 768px.
also you have a couple media blocks that could/should be combined. These last two could be written like this
HTML Code:
@media only screen and (max-width:767px) {
#text-3 .textwidget {
font-size:.5em;
font-family:"Times New Roman",Times,serif;
}
h1 {
font-size:24px;
line-height:1.2;
margin:0.3em 0 10px;
}
#text-13 .textwidget {
font-size:.001em;
font-family:"Times New Roman",Times,serif;
}
}
div.post table {
background-repeat:no-repeat
}
</style>
Ok that's it for today's debugging CSS lesson (grin)
