http://jigsaw.w3.org/css-validator/v...rning=&lang=nl

Los die maar eens op ;-)

Probeer dit is voor de flyfone:

@media screen and (max-device-width: 480px){
#footer { width:100%;}
}

Echter is een dergelijk iets vooral trial en error ;)

Ik heb anageboden in een PM om het op te lossen, hoop op een antwoord. Had zelf het probleem ook, weet niet meer precies hoe het was, maar zal mijn eigen site er even naast liggen en dan proberen, hier oplossingen gaan roepen heeft weinig zin als je het niet kan zien

@Robin, bedankt voor het lijstje, ik vraag me echter af of dit de oplossing zal gaan zijn.... in alle browsers wordt de website goed weergegeven, behalve mobiel... Het volgens de foutrapportage ook hoofdzakelijk om de afgeronde hoeken waar ie het niet mee eens is.

@BaukR, ik ga er naar kijken, thanks!

@Thomas, je hebt een PM

Inderdaad een CSS toevoeging, ik heb voor één van mijn website de volgende codering toegevoegd en heb hier even de comments bij geplaatst:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

#line1 {
display: none;
}

#line2 {
display: none;
}

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#sidebar #searchform #s {
width: 60%;
}

#line1 {
display: none;
}

#line2 {
display: none;
}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
select.menu {
margin: 15px 0px 15px 20px;
display: block;
text-align: center;
}

#line1 {
display: none;
}

#line2 {
display: none;
}

#sidebar {
display: none;
}
#footer p {
padding-top: 5px;
padding-bottom: 15px;
}
#footer p.alignright {
float: left;
}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

#line1 {
display: none;
}
#line2 {
display: none;
}

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#header .title-description {
position: absolute;
top: 15px;
left: 15px;
padding: 20px;
}

#line1 {
display: none;
}

#line2 {
display: none;
}

#footer p.alignright {
float: left;
}
.entry img {
padding: 0px;
background: #fff;
border: 0px solid #e4ecf9;
}
.navigation {
margin: 0px 0px 15px;
}
.navigation .alignright,
.navigation .alignleft {
float: left !important;
}
.navigation .alignright a,
.navigation .alignleft a {
margin: 0px 20px 10px 20px;
}
}

Er zit beweging in! De "min-width" toevoeging lost het probleem op voor wat betreft de footer. Echter op de homepage is nog steeds de achterafbeelding niet zichtbaar, ondanks het uithalen van hetzelfde trucje.

Als je de background zichtbaar wilt hebben ook op je mobiel
probeer eens css3.

background-size: contain;
background-size: cover;

Werkt op iphone, ipad, android.

@Weerderburg, bedankt voor je uitgebreide reactie, het is echter de bedoeling dat de gehele site op 100% wordt weergegeven op elk mobiel apparaat, dus hij wordt geschaald naar schermgrootte.

Het enige waar ik mee zit is dat een achtergrondafbeelding niet wordt weergegeven.
Aanvullend bericht:
@Stephan, is dat niet voor fixed achtergronden? Het gaat hier om een onderdeel van de footer, andere achtergronden worden wel weergegeven alleen 2 stomme plaatjes niet.