Slik sentrerer du tekst på mobil Squarespace

I denne bloggopplæringen kan du lære hvordan du sentrerer tekst eksklusivt for mobilvisningen i Squarespace mens den er annerledes på skrivebordsvisningen.

La oss dykke inn..

Se videoen

Sjekk ut YouTube-videoen nedenfor 👇

Så det jeg vil gjøre er å endre den første tekstblokken inne i den røde boksen til å være midtjustert på mobilvisning.

For å gjøre det, må vi legge til litt kode. Dette er fordi hvis vi prøver å endre justeringen til senter på mobil, vil det også påvirke nettvisningen. Men i dette tilfellet ønsker vi at den skal være senterjustert på mobil og venstrejustert på nettet.

Så lim først inn denne koden i Custom CSS-vinduet:

@media only screen and (max-width:767px) {

 #YOUR_BLOCK_ID_HERE {

    text-align:center;

  }

}

Som du kan se av koden, må vi bytte ut DIN_BLOCK_ID_HER med ID-en til tekstblokken vi ønsker å gjøre midtstilt. Jeg anbefaler på det sterkeste å bruke Squarespace ID Finder Chrome-utvidelsen for å gjøre dette. Den kan lastes ned her: Squarespace ID Finder Chrome-utvidelse.

Etter at du har lastet den ned, klikker du på utvidelsen, og du vil se alle ID-ene vises. Vi er interessert i den første blokk-ID-en, som vil være merket med rødt. Kopier og lim det inn, og erstatt det DIN_BLOCK_ID_HER med blokk-ID fra ID Finder-appen. Dette vil gjøre tekstblokken midtjustert på mobil.

PROTIPS: Hvis du for eksempel også vil at blokken under skal være midtstilt, i stedet for å legge til hele kodesegmentet igjen, legg til et komma (,) etter blokkerings-ID-en og ta med den nye blokk-ID-en slik:

#block_id_1, #block_id_2 { text-align: center; }

På denne måten vil begge blokk-ID-ene bli inkludert i samme kode, og begge vil være midtstilt på mobil.

Bildet viser at teksten forblir venstrejustert på nettversjonen mens den er sentrert på mobilversjonen.

Din designer

Jeg er Victor Rolf, en ekspert Squarespace-designer. Hvis du vil diskutere et potensielt prosjekt, kan du sende meg en e-post på victor@rolfmade.com eller ta kontakt her . Alternativt kan du sette opp en gratis 15-minutters konsultasjonssamtale her.