Ondersteuning » Plugin vragen » Achtergrond responsive

  • Hoi,

    Ik had een vraag, ik ben aan het proberen wordpress te leren e dat gaat vrij aardig. Heb de basiscursus van Lynda gedaan en een theme gekocht: http://classter.themerex.net/. Nu zag ik bij het googlen naar iets voor een leadpage deze site: http://www.smartpassiveincome.com/

    Ik vraag me af hoe die frontpage is gemaakt. Het is namelijk volledig responsive, dus letterlijk alles blijft netjes gecentreerd. Hoe doe je zoiets? Als ik dit zelf doe en de vehoudingen in resolutie veranderen dan valt altijd een deel van mijn image of slider weg.

    Ik wil een ander soort site maken maar ik wil wel dat alles netjes in het midden blijft op bijv een telefoon. Ik heb bij “inspecteren” in Chrome gekeken maar dit is als Chinees voor me, althans de indeling en hiërarchie (css cursus van Lynda staat dit weekend geplanned).

    Groet

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Hoi,

    Dat is niet zomaar even kort uit te leggen en heb je kennis van voornamelijk CSS voor nodig. Kort door de bocht, er wordt hoogstwaarschijnlijk gewerkt met media queries: verschillende CSS voor verschillende schermen.

    In je header.php zet je dit zodat het geactiveerd wordt:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    In je stylesheet (onderaan) maak je dan een gedeelte voor bijvoorbeeld schermen van kleiner dan 768px:

    @media screen and (max-width:767px) {
    // hier de aangepaste CSS
    }

    Er zijn ook thema’s die meerdere media queries gebruiken maar de bovenstaande dekt de meeste mobiele schermen.

    Het menu omzetten naar een select menu werkt met javascript.

    Guido

    Thread starter gsef

    (@gsef)

    Ok,

    Bedankt voor je uitleg Guido. Ik ga dit weekend gung-ho aan de slag met css dus ik kijk hoever ik ermee kom maar ik snap in ieder geval dat het in die hoek zit. Ik weet zeker dat ik nog wat aanvullende vragen heb.

    Gr

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘Achtergrond responsive’ is gesloten voor nieuwe reacties.