Ondersteuning » Thema en CSS/opmaak » Uitlijnen kolom website

  • Hi,

    Een tijdje geleden heeft iemand mij op dit forum geholpen met het verbreden van één kolom en de ruimte tussen de twee kolommen op mijn website (www.sandrarosa.nl) te vergroten. Dit was gelukt, maar zonder dat ik er daarna iets aan veranderd heb is mijn rechter kolom niet meer naar rechts uitgelijnd. Weet iemand toevallig hoe ik dit kan veranderen?

    Alvast bedankt!

    Groetjes,
    Sandra Roza

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Hi sandra,
    Ik heb je site bekeken, en kan niet achterhalen wat je probleem is…

    Kan je PRECIES uitleggen wat en waar je probleem zit…

    Thread starter sandrarosanl

    (@sandrarosanl)

    Sorry dat mijn uitleg niet zo duidelijk was.
    Ik zou graag willen dat de kolom waar mijn foto, instagram zoekbalk enz. naar rechts uitlijnt zodat het precies recht onder het einde van de twee strepen staan. Hierdoor zou er meer ruimte moeten ontstaan tussen de kolom met mijn artikelen en de kolom waar mijn foto in staat.(Dit is ook wat ik graag wil, meer ruimte tussen de twee kolommen op mijn website)

    Ik hoop dat ik het nu iets beter heb uitgelegd en dat het wat duidelijker is.

    Alvast bedankt!

    Hi Sandra,

    Dank voor de aanvullende info!

    Aanpassen van dergelijke zaken is een kwestie van schuiven binnen de bestaande ruimte [breedte] van je site. Soms werkt dat een beetje zoals ’trekken aan een breiwerkje’ >> verander het ene dan gaat het elders scheef…
    Maar ik denk dat ik een werkende oplossing heb voor je.

    loop je vast? Kom je er niet uit?
    Vraag gerust

    @media screen and (min-width: 1024px) {
    	.site-content	{
    		margin-left: -15px;
    		margin-right: -55px; /*aangepast (was -15px)*/
    	}
    
    .widget {margin-left:2.0em;/*pas waarde aan met KLEINE stapjes bijv. 2.1, 2.15 etc*/
    	}

    ADVIES:
    WERK RUSTIG EN NAUWKEURIG
    WERK STAP VOOR STAP

    == == == WAT NU TE DOEN MET DEZE CODE…

    Als je theme een optie heeft om de CSS aan te passen, bijvoorbeeld in een ‘custom css’-veld, plaats dan de aanpassing[en] aan je css hierin.
    Ontbreekt een dergelijke optie in je theme? Volg dan de instructies hieronder.

    Alternatief: Voeg bovenstaande code toe aan style.css van je CHILDtheme.
    Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
    Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.

    Kies je ooit een ander theme, dan dien je een nieuw childtheme te maken.

    == == == ik wil echt GEEN childtheme [en begrijp het probleem van het aanpassen van het originele theme…]
    Zet de bovenstaande code dan ONDERAAN het bestand ‘style.css’ van je thema. Ververs je browser <CTRL-F5>.
    == == ==

    == == == Heb je nog geen childtheme?

    1. installeer en activeer ‘one click childtheme’-plug-in
    2. activeer de originele theme
    3. Dashboard > weergave > child theme
    4. beantwoordt de vragen op het scherm
      >> er wordt een child theme aangemaakt in een map met bestanden zoals style.css;
    5. Activeer het childtheme.
    6. ==

    7. 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;
    • Gebruik een FTP-programma bijvoorbeeld filezilla om je site te benaderen
    • open de map van je childtheme
    • gebruik een code-editor bijv. ‘NOTEPAD++’ [gratis] om het bestand ‘style.css’ van je childtheme te bewerken
    • voeg bovenstaande code toe aan ‘style.css’ van je childtheme > sla alle wijzigingen op
    • UPload de aangepaste ‘style.css’ naar de map van je childtheme [en overschrijf]
    • browser: druk <CTRL-F5> om je browser te verversen
    • bekijk het resultaat

    – 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.

    Thread starter sandrarosanl

    (@sandrarosanl)

    Dankjewel, mijn website wordt nu weer mooi weergegeven. Ik heb alleen nog wel een vraagje. Ik zou de afstand tussen de twee kolommen (kolom met artikelen en de rechterkolom) graag wat groter willen hebben zonder dat de totale breedte van beide bij elkaar groter wordt. Dus dat de kolom met artikelen wat smaller wordt waardoor ertussen meer ruimte ontstaat. Ik heb geprobeerd wat te schuiven, maar ik krijg het zelf niet voor elkaar. Iemand had me hierbij de vorige keer geholpen, maar door deze aanpassingen is dat op een of andere manier weer ongedaan gemaakt.

    Hi Sandra,

    Ik zou de afstand tussen de twee kolommen (kolom met artikelen en de rechterkolom) graag wat groter willen hebben zonder dat de totale breedte van beide bij elkaar groter wordt. […] maar door deze aanpassingen is dat op een of andere manier weer ongedaan gemaakt.

    Soms werkt dat een beetje zoals ’trekken aan een breiwerkje’ >> verander het ene dan gaat het elders scheef…

    #primary.column.three-fourths {
        width: 65%;
        padding-right: 10%;
    }

    Speel met beide waarden [in combinatie] tot je tevreden bent.

    ‘spelregels’

    1. Rommel net zo lang met deze waarden totdat de pagina verspringt en andere problemen geeft…;-)
    2. ooops, net iets te ver… >> stapje[s] terug, totdat de boel weer ‘in het gareel springt…’Zo vind je de grenzen van wat mogelijk is…

    >>niet vergeten:
    Plaats de aanpassingen ONDERAAN je style.css [van je (child-)theme].
    <CTRL-F5> ververs je browser

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Uitlijnen kolom website’ is gesloten voor nieuwe reacties.