Support » Code oplossingen gezocht » Padding en kaders willen niet weg

  • Opgelost arno

    (@edmosveer)


    Goedemorgen,

    Probeer al twee maanden bijna dagelijks om de padding te verkleinen en grijze kaders wit te maken maar niks lukt. De kaders zijn in #e6e6e6 – alle verwijzingen naar die kleur heb ik vervangen voor een andere kleur, maar de de kaders blijven #e6e6e6, ook als ik de stylesheets van de webserver verwijder. Als ik alle border:1px code verander in 0px, verandert dat ook niets. Wel voor de sidebar overigens.

    De padding rond de thumbnails krijg ik ook niet weg en dat is in totaal steeds 4 x 30px per thumbnail waardoor de ruimte tussen twee kolommen 60px is.

    Ik heb alle classes geprobeerd, maar misschien niet goed, alleen negatieve waardes (padding=-30, margin-top-30) hebben een beetje effect. Padding-X maakt de inhoud soms groter maar die gaat dan buiten de container over de kaders.

    Als ik alle padding:30px etc vervangen voor 5px als test,verandert er niets?

    Ook als ik het stylesheets verwijder van de server en cache leeg, verandert er niets?

    Misschien kan iemand me helpen hierbij?

    Alvast bedankt, gr. Arno

    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)
  • Hoi, vervelend en lijkt me enorm frustrerend 😉

    Ik heb even gekeken en de padding zijn tamelijk groot. Via de volgende CSS kun je die eventueel aanpassen. Voeg ze b.v. toe aan de customizer via ‘Extra CSS’.

    body.ct-boxed #primary .widget,
    body.ct-boxed .container-inner #primary .engage-mag-article-wrapper > article {
        padding: 0;
    }

    Verder bestaat negatieve padding niet. Wel negatieve margins maar zou ik persoonlijk niet aan beginnen, het gaat vaak weer andere zaken tegenwerken in je layout tenzij je er consistent mee omgaat en beperkt tot een enkele aanpassing.

    Als je de border property gebruikt kun je die eventueel weghalen door de css optie:

    .cssClass { border: none !important }

    te gebruiken. Dit forceert een border weg te halen, zelfs als die dieper toegekend is via een reeks aan classes. CSS luistert namelijk naar de diepste selectie. Als je b.v. deze CSS zou gebruiken:

    #selector divElement { border: 1px solid red; }

    en

    .selector divElement { border: 1px solid blue; }

    Zou de # altijd overrulen omdat een hashtag (ID) een hogere prio heeft in CSS. Ook het uitschrijven van volle paden en de ‘!important’ eigenschap heeft hogere prio en kun je gebruiken om CSS te overschrijven als die eerst niet overschreven wil worden. Hou er wel rekening mee dat je dit eigenlijk alleen in geval van nood gebruikt, niet standaard overal.

    • Deze reactie is gewijzigd 3 weken, 4 dagen geleden door Ruurd de Wind.
    Thread starter arno

    (@edmosveer)

    Ruurd,

    Ik ben heel erg blij!!! Padding weg, bedankt! Die neg waardes werken inderdaad slecht.

    Nu heeft de mobiele versie iets meer padding naast de eerste berichten en slider op de homepage. Geen probleem, maar misschien kan die code worden aangepast zodat het voor grote schermen geldt?

    Alleen de border is nog niet weg. Bedoelde je dat ik het precies zo moet plaatsen in de customizer: met .cssClass of mijn eigen class?

    En waar wordt de kleur van die border bepaald denk je? Ik heb het in alle bestanden vervangen voor bijna wit. Ook gezocht naar rgb code, en alles geupload naar de server.

    Bedankt en een fijne avond!

    Gr. Arno

    Thread starter arno

    (@edmosveer)

    Hallo Ruurd,

    De border is weg nu. Ik zoek het wel uit met de mobiele versie tenzij je een stukje code kent dat alleen wordt uitgevoerd bij grote schermen? Vreemd genoeg negeerde de mobiele versie de normale padding van 30 en vulde alles op, maar de kleinere padding die ik toevoeg met jouw css code wordt wel toegepast.

    Bedankt, gr. Arno

    Ik zie zo niet waar je de border hebt staan?

    Voor grote en kleine schermen kun je aparte CSS laden. Voor bijvoorbeeld alleen schermen die breder zijn dan 1024px kun je de volgende media query gebruiken:

    img {
       border: 3px solid green;
    }
    
    @media (min-width: 1024px) {
       img {
           border: 3px solid red;
       }
    }

    Dit geeft alle images op mobiel een border van 3 pixels in de kleur groen en op desktop en hoger een rode border.

    Thread starter arno

    (@edmosveer)

    Hoi Ruurd,

    De border heb ik nu weggehaald, vroeg me alleen af waar die kleur werd bepaald van die border. Ben helemaal tevreden, en de marges op mobiel zijn ook goed te besturen, helemaal met de code die jij doorgaf, ik ga dat uitwerken. Ik zet het topic op opgelost, bedankt, je hebt een pizza tegoed.

    Gr. Arno

    Geen probleem. Pizza? Lekker 🙂

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)