Paginatitel responsive maken

  • Barrie89

    (@barrie89)


    8 jaren, 11 maanden geleden

    Hallo allemaal,

    Ik heb een probleem met het responsive krijgen van mijn paginatitels (ik gebruik het Scalia template). Alle teksten zijn responsive, maar op mijn telefoon verdwijnen paginatitels, net als de afbeelding erachter, gewoon uit beeld en het is onmogelijk naar rechts te scrollen.
    Ik heb op advies van de mensen achter het template de volgende code toegevoegd in mijn custom css:

    @media (max-width: 600px) {
    h1,
    .title-h1 {
    font-size: 20px;
    line-height: 1.4;
    }

    Maar de titels worden geen pixel kleiner, zelfs niet als ik hem instel op 5px of 2em. Ik heb de code op verschillende plaatsen geprobeerd (style.css ed) maar het lukt me gewoon niet de titels kleiner te krijgen. Aangezien de mensen van Scalia mijn ticket inmiddels al drie keer op “solved” hebben gezet maar mijn probleem nog steeds niet “solved” is, hoop ik dat jullie me kunnen helpen!

    Een voorbeeld van een van de pagina’s waar tekst en afbeelding gewoon verdwijnen vind je hier.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Arjen_M

    (@arjen_m)

    8 jaren, 11 maanden geleden

    Probeer dit eens : 

    @media (max-width: 600px) {
h1,
.title-h1 {
font-size: 20px !important;
line-height: 1.4 !important;
}

    let op de uitroepteken voor important

    Thread starter Barrie89

    (@barrie89)

    8 jaren, 11 maanden geleden

    Ah dat werkt, super!
    Kun je misschien ook zien hoe ik de afbeelding erachter responsive krijg, zodat hij verkleint in plaats van “afhakt”? Scalia is een geweldig template met veel (makkelijke) mogelijkheden, maar de code opbouw is voor mij net te ingewikkeld. Ik kan zelfs met element inspecteren niet goed zien onder welke class die afbeeldingen vallen

    Arjen_M

    (@arjen_m)

    8 jaren, 11 maanden geleden

    De background-size: staat op cover. dit betekent verspreiden op elk scherm. hij probeert m aan te passen voor je

    daarom ziet ie er zo raar uit op je mobiel.

    je zou het kunnen veranderen naar contain. maar dan zit je weer met het probleem dat grotere schermen niet gevuld worden doordat de afbeelding niet groot genoeg is.

    je kan ook in de media queries dit doen.
    zoals je hebt gedaan met de font-size en line-height

    dan moet je in de style.css het volgende toevoegen

    en voor elke query de background-image aanpassen naar wens.

    de code lijkt erg veel op dat van Bootstrap, maar de thema bouwer heeft het nodige aangepast. De standaard bootstrap queries werken in ieder geval niet met element inspecteren. (had het allemaal een stuk makkelijker gemaakt)

    Thread starter Barrie89

    (@barrie89)

    8 jaren, 11 maanden geleden

    Ik heb een media querie met contain geprobeerd, dat ziet er al een stuk beter uit!
    Maar hoe kan ik dit nu het beste doen qua padding? Om de achtergrond in zijn geheel te laten zien moet ik pixels opgeven, maar die zullen op iedere telefoon anders zijn en het heeft natuurlijk ook effect op portrait/landscape stand.
    Is daar een soort “auto” functie voor, of moet ik maar gewoon een gemiddeld aantal pixels invullen en hopen dat de ruimte tussen het blok en de rest van de pagina niet te groot wordt?

    Thread starter Barrie89

    (@barrie89)

    8 jaren, 11 maanden geleden

    Misschien maakt dit het wat duidelijker, dit is de code zoals ik hem er nu in heb staan:

    @media only screen
and (min-device-width : 300px)
and (max-device-width : 667px) {
	.page-title-block {
	text-align: center;
	background-position: 0% 0%;
	padding: 20px 0;
	background-repeat: no-repeat;
	position: relative;
	background-size: contain !important;

	}

    De background-position heb ik veranderd om witte strepen tussen het menu en de foto te voorkomen, no-repeat heb ik toegevoegd om vier foto’s onder elkaar te voorkomen (padding stond eerst op 175px).
    Voor de telefoon die ik als test gebruik is een padding van 20px dus al genoeg, maar dan kan ik hem niet landscape gebruiken. Zet ik de padding echter hoger, zodat hij ook landscape het beeld vult, dan krijg ik een groot wit stuk tussen de banner en de rest van de pagina.
    Zoals je inmiddels gemerkt zult hebben ben ik nog niet ehct thuis op dit gebied dus heb geen idee wat ik toe kan voegen of veranderen

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Paginatitel responsive maken’ is gesloten voor nieuwe reacties.