Afbeelding in header wordt helemaal uitgerekt

  • BartB82

    (@bartb82)


    10 jaren, 6 maanden geleden

    Ik ben zeer onervaren met WordPress. Wel heb ik het voor elkaar gekregen om een child theme te maken van mij wordpress twenty thirteen theme.

    Op mijn site: http://www.schoonmaakbedrijfbreddels.nl/nieuwesite zie je dat de afbeelding in de header helemaal uitgerekt is. Ik heb mij rot gezocht en toen heb ik in het mapje van de child in het bestand style.ccs het volgende gezet:

    /*
    Theme Name: Twenty Thirteen Child
    Theme URI: http://example.com/twenty-thirteen-child/
    Description: Twenty Fourteen Child Theme
    Author: B.P. Breddels
    Author URI: http://www.schoonmaakbedrijfbreddels.nl
    Template: twentythirteen
    Version: 1.0.0
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: twenty-thirteen-child
    */

    @import url(“../twentythirteen/style.css”);

    /* =Theme customization starts here
    ————————————————————– */

    .site-header .home-link {
    min-height: 150px;*/
    min-width: 614px;*/
    }

    Dit werkt alleen niet. Wat doe ik fout?

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • marcelloc

    (@marcelloc)

    10 jaren, 6 maanden geleden

    Is je afbeelding formaat kleiner dan je header afmetingen? als dat zo is trekt die hem idd wat uitelkaar, zorg dat het gelijk is.

    Thread starter BartB82

    (@bartb82)

    10 jaren, 6 maanden geleden

    Afbeelding is inderdaad kleiner. Maar ik wil dus niet dat de afbeelding uit elkaar getrokken wordt.

    Wat te doen?

    marcelloc

    (@marcelloc)

    10 jaren, 6 maanden geleden

    Je site is niet te zie dus ik kan niet kijken.
    Maar die afmetingen moet gelijk zijn, anders hou je dit probleem.
    Afbeeldingen vergroten is meestal geen optie tenzij het een heel klein verschil is. Als het een afbeelding moet zijn die de zelfde breedte afmeting heeft dan de rest van je site. Dan zal je een nieuwe afbeelding moeten maken die wel aan die formaten voldoet.

    T Verhoeven

    (@t-verhoeven)

    10 jaren, 6 maanden geleden

    Kun je je website live zetten dan kan ik je helpen.

    Groet,
    Thijs
    –

    • Deze reactie is gewijzigd 3 jaren, 9 maanden geleden door Richard van Denderen. Reden: handtekening verwijderd
    Marco Bax

    (@marcobax)

    10 jaren, 6 maanden geleden

    Haal sowieso de ” */ ” tekens weg in de styling. Het moet dus worden:

    .site-header .home-link {
min-height: 150px;
min-width: 614px;
}

    in plaats van

    .site-header .home-link {
min-height: 150px;*/
min-width: 614px;*/
}

    Wat je in bovenstaande code zegt is dat de afbeelding een minimale hoogte van 150 pixels moet hebben, en een minimale breedte van 614 pixels. Nu is dat prima voor een afbeelding van 150x614px, echter voor elk ander formaat zul je merken dat deze uitrekt. Je zult dus ervoor moeten zorgen dat de aspect ratio juist is.

    Een oplossing zou kunnen zijn om de .site-header blok een hoogte te geven met een overflow: hidden. Bijvoorbeeld:

    .site-header { height: 150px; overflow: hidden; max-height: 150px; width: 614px; }

    vervolgens de afbeelding in dit blok te plaatsen:

    .site-header .home-link { width: 100%; height: auto; }

    Voorbeeldje: http://jsfiddle.net/3d9Y8/

    Speel met de CSS opmaak, lijn bijvoorbeeld de afbeelding in de hoogte uit in plaats van de breedte enzovoorts.
    ____________________
    Lees ook mijn blog over verbetertips voor je website of webshop!
    Goede WordPress handleiding nodig? Klik dan hier!

    Thread starter BartB82

    (@bartb82)

    10 jaren, 6 maanden geleden

    Beste mensen,

    Hartelijk dank voor het meedenken tot zover. De site staat gewoon online op dit adres: http://www.schoonmaakbedrijfbreddels.nl/nieuwesite/

    Ik snap eerlijk gezegd niet waarom de link in mijn eerdere post niet werkt.

    Ik hoop dat jullie nu kunnen zien wat er mis gaat.

    Tibor Paulsch

    (@tibor)

    10 jaren, 6 maanden geleden

    Je site is 1600px breed, en je gebruikt een plaatje van 614px (http://www.schoonmaakbedrijfbreddels.nl/nieuwesite/wp-content/uploads/Logo.jpg)

    Je moet zorgen dat je logo bestand ook minstens 1600px breed is.

    Thread starter BartB82

    (@bartb82)

    10 jaren, 6 maanden geleden

    Ik dacht eigenlijk dat je met wordpress en dan een childtheme van alles kon regelen, maar dit dus kennelijk niet.

    Het probleem is dat mijn logo niet die afmetingen heeft. Ik zal er dus witte balken naast moeten plakken als ik het goed begrijp?

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Afbeelding in header wordt helemaal uitgerekt’ is gesloten voor nieuwe reacties.