Bij het werken aan een ‘resposive’ theme is het goed om zo veel mogelijk te werken met ‘relatieve waarden’.
Stijlkenmerken zoals hieronder geven ‘vaste’waarden. Dat maakt ze moeilijk / niet schaalbaar in een responsive theme.
BIJVOORBEELD
.img{
width:850px;
height:150px;
}
en ook
p{
font-size: 12px;
}
Gebruik daarom zoveel mogelijk relatieve waarden voor deze elementen.
.img{
width:100%;
height:100%;
}
en ook
p{
font-size: 1.2em;
}
Elke device [tablet, telefoon etc.] leest die % en em als een maat relatief aan de eigen default-instelling, en maakt de elementen dus passend voor die betreffende scherm-afmetingen.
Suggestie:
- MAAK EEN BACKUP van
style.css
- Maak een ‘childtheme’ aan en voer hierin de wijzigingen door. Zo voorkom je dat bij een update van je theme je harde werk verloren gaat.
- Maak de aanpassingen in
style.css van je childtheme
== == == childtheme
Heb je nog geen childtheme?
- installeer en activeer ‘one click childtheme’-plug-in
- activeer de originele theme
- Dashboard > weergave > child theme
- beantwoordt de vragen op het scherm
>> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
- Activeer het childtheme.
==
- om je site aan te passen, maak je nu alle wijzigingen in de map en bestanden van je child theme.
– Maak je aanpassingen in style.css van het childtheme;
– mocht je aanpassingen willen maken in de originele php-bestanden, kopieer de betreffende php-file uit het originele theme naar de map van het childtheme. Maak hierin dan de gewenste aanpassingen.
== == == Extra
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen, installeer dan bijv de browser-add-on ‘firebug’ of een andere webdeveloper plugin / add-on.
Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren etc. aanpassen.
Hi bedankt voor alle tips,
heb het geprobeerd, maar op het moment dat ik de waardes van het logo verander naar:
width: 100%
height: 100%
heb ik nog steeds hetzelfde probleem, het logo word te groot weer gegeven.
Weet niet precies waar het aan kan liggen, het lastig is ook dat dit thema een stuk of 5 css files heeft, dus het is veel zoeken naar het juiste bestand.
hoe dan ook bedankt voor de uitgebreide uitleg.
.. nou spelen met de percentages…
Kijkend naar je site, probeer eens de volgende code in je childtheme:
img{
width:100%; /*speel met deze waarden*/
height:100% /*speel met deze waarden*/
}
Vervolgens:
Druk <CTRL-F5> om je browser te verversen.
of leeg je browser-cache:
http://www.browserchecker.nl/cache-bestanden-verwijderen
Als je precies wilt zien welke elementen je site heeft en welke opmaak-kenmerken [css] daarbij horen, installeer dan bijv de browser-add-on ‘firebug’ of een andere webdeveloper plugin / add-on.
Zo kan je op zoek naar de diverse elementen en de kenmerken zoals kleuren etc. aanpassen.
