Slik skjuler du elementer på Mobile View Squarespace
I denne bloggopplæringen skal jeg vise deg hvordan du skjuler elementer på mobilvisning | Squarespace
La oss dykke inn..
Se videoen
Sjekk ut YouTube-videoen nedenfor 👇
For å få dette til å fungere, må vi legge til en egendefinert kode. Gå til Custom CSS-delen og lim inn følgende kode:
@media (max-width: 768px) {
#DIN ID
{
display: ingen;
}
}
De DIN ID må være den unike ID-en til elementet du prøver å skjule. (Fortsettelse under bildet.)
For å finne den unike ID-en til elementet du vil skjule, anbefaler jeg at du laster ned Squarespace ID Finder- utvidelsen for Chrome. Når den er installert, klikker du på utvidelsen, og den vil vise ID-ene til elementene på nettstedet ditt.
Du ser etter "blokk-IDen" , som er den du trenger for å lime inn i koden.
På bildet nedenfor har jeg limt inn blokk-IDen for et bilde i koden, noe som gjør det skjult på mobilvisning.
PS: Elementer som dette er vanligvis blokk-yui-ID-er , så IKKE skjul seksjons-ID-er eller samlings-ID-er .
(Veiledningen fortsetter nedenfor.)
Hvis du vil skjule to eller flere elementer, som både tekst og et bilde, legger du bare til et komma og limer inn neste blokk-ID .
Denne tilnærmingen forhindrer unødvendig repetisjon av den samme koden når du bygger ut et stort område.
@media (max-width: 768px) {
#DIN ID,
#DIN ID,
{
display: ingen;
}
}
Denne metoden sikrer også at elementene forblir synlige på skrivebordsversjonen mens de bare er skjult i mobilvisning. 😊
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.
