Beste SD'ers,
Tijdens het testen van deze website:
thf.jwlwebdesign.nl
Kwamen we er achter dat ie niet goed wordt weergegeven op mobiele apparatuur.
Op de iphone bijvoorbeeld mist er een stukje van de achtergrondafbeelding in de footer (rechts onderin) ditzelfde geldt voor Chrome op Android.
OP de standaard browser van Android wordt zelf het bovenste gedeelte van de footer op de homepage niet weergegeven en op vervolgpagina's hetzelfde probleem als bij de bovenstaande...
Ik heb het vermoeden dat dit een kleine css aanpassing vereist, maar ik weet m niet en kan m ook niet vinden...
Voor degene die me de gouden tip geeft voor de oplossing ligt er EUR 15,- klaar of een Adwordsbon van 50.
- Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
-
974 × bekeken sinds 08-08-2012, 20:18 #1
Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
-
In de schijnwerper
Zoveel mogelijk top 3 posities met relevante keywords?Freelance / WerkVacature €4500 p/m: WordPress Developer bij Festinger VaultFreelance / WerkServerFIX| 24/7 server beheer | 24/7 NOC | Urgente storingsopvolging | Netwerk beheerFreelance / WerkHulp bij SEO/GoogleAds (NL/BE/DE). Economy.nl Google Premier Partner.Freelance / Werk -
08-08-2012, 20:48 #2
- Berichten
- 129
- Lid sinds
- 12 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
http://jigsaw.w3.org/css-validator/v...rning=&lang=nl
Los die maar eens op ;-)
-
09-08-2012, 07:23 #3
- Berichten
- 253
- Lid sinds
- 14 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
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 ;)
-
09-08-2012, 07:48 #4
- Berichten
- 33
- Lid sinds
- 12 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
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
-
09-08-2012, 08:18 #5
- Berichten
- 606
- Lid sinds
- 13 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
@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
-
09-08-2012, 08:40 #6
Weerdenburg Global Media
- Berichten
- 115
- Lid sinds
- 14 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
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;
}
}
-
09-08-2012, 08:51 #7
- Berichten
- 606
- Lid sinds
- 13 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
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.
-
09-08-2012, 08:57 #8
- Berichten
- 589
- Lid sinds
- 15 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
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.
-
09-08-2012, 08:59 #9
- Berichten
- 606
- Lid sinds
- 13 Jaar
Re: Welke CSS goeroe heeft de gouden tip?! Uiteraard tegen vergoeding.
@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.Laatst aangepast door Jan Willem L. : 09-08-2012 om 09:03 Reden: Automatisch samengevoegd.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic