Opmaak blog CSS ellende

  • Opgelost bramvanmunster

    (@bramvanmunster)


    1 jaar, 4 maanden geleden

    Ik zal ongetwijfeld ergens gruwelijk langs kijken omdat ik er al weken op zit te staren, maar kom er dus niet helemaal uit hier. Eigenlijk helemaal niet.

    Mijn blog is in grafische zin een wirwar van twenty-twenty-three, CryptoStore en Cryptocurrence Exchange wat ik heb omgesmurft naar een mopperblog. Functioneel werkt alles, althans, werkte, want sinds updates zijn de titels, samenvattingen en knoppen niet meer in hun eigen “box” uitgelijnd maar kiezen hun eigen plekje gebaseerd op de titel lengte en hoofdonderwerpen die boven de titel staan, alsmede de datumstempel die er bij staat.

    Nou heb ik ooit es gelezen dat je dat van die data kan oplossen met een instelling, en de rest van de uitlijning met CSS kan oplossen, maar ik denk dat ik me blind heb gestaard op allerlei niet-werkende onzin.

    Iemand zin om ff mee te loeren?

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

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)
  • Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Hoi Bram,

    Ik zie de door jou genoemde dingen niet op je site. Is het inmiddels opgelost?

    Wat me wel opvalt is dat de tekst van de 3 kolommen (Reacties op het nieuws) in kleiner scherm (zoals tablet) buiten de kolommen schiet. Dat kun je oplossen met deze CSS:


    body {word-wrap:break-word;}

    En persoonlijk vind ik deze 3 kolommen in een kleiner scherm wel erg smal, maar dat komt doordat de container waarin ze staan ook niet heel breed is. Hij springt wel naar 2 kolommen, maar dat gebeurt pas in een vrij klein scherm.

    Guido

    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Hey Guido,

    Sorry voor het late antwoord, ik was aan het werk. Ik zie de “fout” nog altijd op de desktop of laptop. Ik heb een screenshot gemaakt van de uitlijning en er een rood kader omheen getekend en maar ff op m’n server gezet.

    Trouwens, bedankt voor de tekst hint, die ga ik er zo ff inbakken denk ik! 🙂

    • Deze reactie is gewijzigd 1 jaar, 4 maanden geleden door bramvanmunster.
    Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Hoi,

    Oh, je bedoelt alleen de uitlijning van de lees meer knop.
    Ik zie dat je dat zelf op pagina Extra CSS van de Customizer hebt gezet:

    .blog-more-link {border-radius: 15px 50px;margin-left: 25px;}

    Haal de margin weg en klaar.

    Guido

    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Helaas, dat maakt de “lees meer” knoppen terug vierkant en doet niks aan de uitlijning…

    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Lijkt er op dat “blog-short-content” een vaste omlijning moet hebben voordat de knoppen niet meer verspringen…

    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Toegegeven: Daar heb ik behoorlijk mee zitten viezerikken in de custom CSS

    Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Helaas, dat maakt de “lees meer” knoppen terug vierkant en doet niks aan de uitlijning…

    Ik zei dat je alleen de margin weg moet halen, dus het wordt dan zo:

    .blog-more-link {border-radius: 15px 50px;}
    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Is geprobeerd tot in den treure zonder effect, op de (editing) PC, laptop, tablet en foon, met constant het zelfde resultaat…. Het kan bijna niet anders dan dat er wat anders zit te vervelen, maar ik waardeer je inzet!!! Nogmaals: Ik staar mezelf blind hierop…
    Kan het zo zijn dat de volgorde van CSS regels invloed heeft?

    Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Hoi,

    Ik zie dat deze CSS nog steeds actief is op pagina Extra CSS van de Customizer. Enige wat je moet doen is dit stukje weghalen:

    margin-left: 25px
    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Dat werkt niet, ook niet in test modus offline. Wat dat doet is dat de knoppen naar links springen, terwijl de horizontale uitlijning identiek blijft. Heb nog wat zitten klooien hiermee, en ook met de zelfbenoemde CSS guru ChatGPT. Geen van alle suggesties werkt. Wat me in dat proces wél opviel is dat het alleen de middelste kolom aangaat, en alleen op een groot scherm zoals (in mijn geval) een PC.

    Wat zijn andere dingen die ik kan proberen of testen / debuggen???

    Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Wat dat doet is dat de knoppen naar links springen, terwijl de horizontale uitlijning identiek blijft.

    Ik denk dat we elkaar dan niet goed begrijpen. Ik begreep dat je de knoppen links uitgelijnd wilt hebben (ipv in het midden). Dat begreep ik ook uit de schermprint die je eerder al deelde.

    Guido

    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Dan snappen we elkaar inderdaad niet helemaal! Laat ik het proberen…

    In de middelste kolom staan de “lees meer” knoppen meestal hoger als in kolom 1 en 3, en ik wil ze eigenlijk allemaal perfect horizontaal uitgelijnd hebben…

    Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Aha, nu snap ik em..

    Ik zie dat je voor je berichttekst al een minimale hoogte hebt ingesteld van 175 pixels.
    Datzelfde moet je dan ook voor de berichttitel doen. Voorbeeld:

    h3.blog-title {min-height: 100px;}

    En de titels van je berichten ongeveer even lang maken.

    Guido

    Thread starter bramvanmunster

    (@bramvanmunster)

    1 jaar, 4 maanden geleden

    Ik zat idd ook in die richting te denken, en experimentje gedaan… De CSS oplossing is: 

    .blog-title { min-height: 100px; max-height: 100px;}
.post-content-area {min-width: 75%;}

    En nu staat het prachtig!!!


    Bedankt voor je tijd en moeite!!! Ik ga je voordragen voor zo’n koninklijk lintje en zulk gedoe meer 😉

    Ik ga ‘m antwoorden als opgelost!

    Guido

    (@guido07111975)

    1 jaar, 4 maanden geleden

    Ik ga je voordragen voor zo’n koninklijk lintje en zulk gedoe meer


    Graag gedaan en ik zie de uitnodiging hopelijk tzt verschijnen 😉

    Guido

15 reacties aan het bekijken - 1 tot 15 (van in totaal 15)
  • Het onderwerp ‘Opmaak blog CSS ellende’ is gesloten voor nieuwe reacties.