Ondersteuning » Thema en CSS/opmaak » Witruimte onder header

  • heleenkruitbosch

    (@heleenkruitbosch)


    Dag, ik ben al langere tijd aan het proberen om de witruimte tussen de header en de eerste afbeelding op de home-pagina te verkleinen, maar ik komt er niet uit. De codes die reeds op deze topic zijn genoemd, verhelpen het probleem niet. Ik hoop dat iemand mij verder kan helpen, alvast bedankt! MVG Heleen

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Code die je in andere topics ziet gaan 9 op 10 keer niet toepasbaar zijn op jouw site, want die hangen af van je thema of plugins die het uiterlijk van jouw site bepalen.

    Met deze CSS zou het moeten lukken:

    div.wrap{
    padding-top:0px;
    }

    Als het nog meer moet, kan je ook nog dit toevoegen:

    .entry-header{
    margin-bottom:0;
    }

    Deze CSS code kan je kwijt via Weergave > Customizer > Extra CSS veld, of als je een childthema gebruikt in je style.css

    Jeroen

    Thread starter heleenkruitbosch

    (@heleenkruitbosch)

    Dag Jeroen,

    Bijzonder bedankt voor je snelle reactie! Helaas vormde dat ook niet de oplossing. Heb inmiddels wel ergens anders de code kunnen vinden die voor mijn website de oplossing bood. Het is een lange code en misschien kan er wel iets van weg (want ik weet niet precies wat alles betekent), maar hij werkt voor mij en voert verder geen rare aanpassingen op mijn site door, dus ik ben er blij mee 🙂 Tenzij je nog suggesties hebt om de code te optimaliseren? Hartelijke groet, Heleen

    .site-content {
    padding-top: 2em;
    }

    .page-header {
    padding-bottom: 0;
    }

    @media screen and (min-width: 48em){
    .panel-content .wrap {
    padding-top: 0px;
    }
    .page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 0px;
    }
    }
    @media screen and (min-width: 48em) {
    .site-content > .wrap {
    max-width: 910px !important;
    }
    .site-content > .wrap .content-area {
    max-width: none !important;
    }
    }
    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap {
    max-width: 910px;
    }
    }

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Mijn stukje was alvast voldoende, wat je hier allemaal plakt heeft veel meer invloed dan enkel de marges verminder/weghalen zoals ik deed, hier maak je bv. nog aanpassingen aan breedtes van bepaalde secties. Zo maar copy-pasten van code zou ik je dus afraden. Mijn stukjes code deed het alvast in de browser voor mij, had je na het plaatsen van me code de cache verwijderd als je een caching plugin gebruikt en/of eens gekeken in een privé venster of andere browser? Mogelijks zag je geen verschil door cache in je browser.

    Jeroen

    Thread starter heleenkruitbosch

    (@heleenkruitbosch)

    Dag Jeroen,

    Ik had heel graag gezien dat jouw code zou werken op mijn website, maar ik blijf dan elke keer die grote witruimte zien, ook als ik suggesties doorvoer die jij nog geeft. Ik heb de code nu verkleind naar:

    @media screen and (min-width: 48em){
    .panel-content .wrap {
    padding-top: 0px;
    }
    .page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 0px;

    Daarmee is de witruimte nog steeds verkleind en heb ik het overbodige volgens mij weg gehaald. Of denk je dat ook deze code op een bepaalde manier mijn website nadelig kan beïnvloeden?

    Ik ben benieuwd naar je reactie, alvast hartelijk bedankt!

    Heleen

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Hey,

    Het ziet er goed uit, op zich is het uitbreiding op wat ik aangaf, en dat ook een media query voor de eerste dat het enkel op desktop breedtest toepast, dus ik zie eigenlijk geen verschil met mijn code, maar goed.

    Jeroen.

    Thread starter heleenkruitbosch

    (@heleenkruitbosch)

    Fijn te lezen, dank je wel voor het actieve meedenken en je snelle reacties! Hartelijke groet, Heleen

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘Witruimte onder header’ is gesloten voor nieuwe reacties.