Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

proghodet skrev (11 timer siden):

Noe sånt?

JAAAAAA!

  Nå er styles.css gaaaanske rotete

Tusen takk for at du assisterer; jeg har oppdatert Github ... sjekker egen mobil nå ...

Det er den nederste knappen og rekkefølgen av dem som trenger justering ... og så er forsiden FERDIG!

 

- - -

Æh, glemte å justere @media for snudd mobil (ble visst tre 1fr der. Fikser ... )

Gjorde det rett i github. Ser fint ut i virtuell visning i Firefox, men på min mobil, i panoramavisning, har jeg ennå 3 x 3 - visning. Slettet alle nettleserdata. Pussig. Har Motorola Zoom-modellen større enn 768px??

Velger litt ulike virtuelle mobiler, og alt virker som det skal i Firefox. Pussig.

Fra Motorola sine sider, ang displayet:

Display Size: 6.4"

Resolution: Full HD+ (2340 x 1080p) Er det dette som skaper problemer?

Screen to Body Ratio: 85%

Display Technology: Max Vision OLED capacitive touchscreen with U-notch display
Aspect Ratio: 19:9
Display Features: 2.5D Panada King glass (front), 3D Gorilla Glass 3 (rear)

Hvis oppløsningen på min mobil er 2340px i panorama, kan jeg bare glemme å få den fin der? Men jeg har en alliert med iphone som jeg straks får et par skjermbilder fra ...

Men i portrett-modus kommer det jo to kolonner med knapper, og kort overskrift? Den burde jo ikke det da, hvis den virkelig er 1080px??

Bildene fra iphonen var innenfor kantlinjen. Fremdeles 3 x 3 knapper i liggende stilling 2x4+1 i stående. Hos meg går kantlinjen (og  3x3-knappene) utenfor skjermen. Ikke hos iphone.

- - -

Ikke noen problemer hos Huawei heller. Har forsøkt å endre fra overflow: hidden -> auto, bare for å se. Har ikke sjekket absolutt alle mobilmulighetene i Firefox, men alle jeg har sjekket, ser helt 0K ut (bortsett fra nederste knapp).

- - -

Plutselig funket det! Siden 'alle andre' så noe annet enn meg, gikk jeg til slutt inn i nettleserinnstillingene på Firefox (mobil). Ah! Slo av automatisk skriftstørrelse, og voilà!

Happy happy happy!

Nå ser jeg det 'alle andre' ser.
 

Endret 12. august 2022 av Zenobia

[Zenobia]

Jeg begynner med undersiden 'Sending' (tidl. Episoder). Siden miniblogg.no LEGGES NED 1. sept, er det den som haster mest å få istand.

Da ser tronora.github.io/episoder bedre ut.

Laget .lenker (=skriftfarve + ingen understrek)

Skrive inn og redigere manus til tredje sending neste. Og fjerde. Så kan miniblogg.no/integra cease to exist, "noe som er trist" (det rimer iallfall), men da har jeg berget meg.

HUSK: Endre lenker i Anchor & Spotify.

Lenker ikke videre fra 'sending'-siden før mere er klart.

 

Endret 12. august 2022 av Zenobia

[Zenobia]

Da skal jeg forsøke å løse mobilvisningen til forsiden.

Ser på denne nå:

 

Må jeg virkelig bort fra grid-løsning i mobil allikevel?? Eller løse det med flere 1fr + span. Vi får se.

[Zenobia]

Da har jeg registrert meg for et gratiskurs: Conquering Responsive Layouts

Først: Flexbox or grid - How to decide.  Mulig videoen allerede er i tråden etsteds.

Kaaaanskje jeg har løst det ... i grid. Jeg trenger  4fr, hvor de første 8 knappene går i hhv. 1-2, 3-4, og den siste går 2-3.

Så var det å lage koden

last-child?

Så prøver jeg 1fr 1fr 1fr 1fr og å legge til grid-column: span 2. Det trodde jeg skulle se akkurat likedan ut, men jeg får fire kolonner, og inspektøren gir følgende feilmelding vedr. grid-column:

"grid-column has no effect on this element since it’s not a grid item.
Try adding display: grid or display: inline-grid to the element’s parent."

Atte hæ?

Har jeg ikke nettopp definert display: grid????!

Okei, jeg prøver inline-grid, bare fordi atte.

@proghodet Du må gjerne titte innom som snarest

- - -

Inline-grid bare forskjøv de fire kolonnene ut til én side istedenfor midtstilt.

Jeg får se om jeg finner foreldrene til disse barna og sette display: grid.

Eller la 1fr 1fr stå (mobilvisning hele tiden her), og prøve å gjøre noe med last-child. Men hvis det ikke blir oppfattet som et grid-element, er jeg like langt?

Endret 21. august 2022 av Zenobia

[Zenobia]

Okei, da har jeg endret en annen klasse. Da funker 1fr 1fr 1fr 1fr OG grid-column: span 2. Nå ser alt likt ut, jeg må bare få siste knapp til å gå over kolonne 2 og 3 istedenfor 1-2.

Kanskje det løser seg!!!!!

Syntaks er a:last-child {grid-column-start 2}

Haha, trodde jeg iallfall. Har prøvd ulike verdier, og å endre fra 1fr til auto. Linjer og kolonner starter ikke der JEG tror de vil.

Endret 21. august 2022 av Zenobia

[proghodet]

10 minutter siden, Zenobia said:

Okei, da har jeg endret en annen klasse. Da funker 1fr 1fr 1fr 1fr OG grid-column: span 2. Nå ser alt likt ut, jeg må bare få siste knapp til å gå over kolonne 2 og 3 istedenfor 1-2.

Kanskje det løser seg!!!!!

Er tilgjengelig når barna er i seng 😊

[Zenobia]

proghodet skrev (Akkurat nå):

Er tilgjengelig når barna er i seng 😊

  Flott!

[proghodet]

Forslag på mobil:

.buttons {
  display: flex;
  flex-wrap: wrap;
  (pluss andre styles du hadde)
}

.buttons a {
  flex: 0 0 30%;
}

For å sette rekkefølgen kan du f.eks bruke pseudo-klassen :nth-child:

.buttons a:nth-child(1) {
  order: 2;
}

.buttons a:nth-child(2) {
  order: 1;
}


Er det ca det du trenger?

[Zenobia]

 

proghodet skrev (13 minutter siden):

Forslag på mobil:

.buttons {
  display: flex;
  flex-wrap: wrap;
  (pluss andre styles du hadde)
}

.buttons a {
  flex: 0 0 30%;
}

For å sette rekkefølgen kan du f.eks bruke pseudo-klassen :nth-child:

.buttons a:nth-child(1) {
  order: 2;
}

.buttons a:nth-child(2) {
  order: 1;
}


Er det ca det du trenger?

  Nai. Da blir det bare én kolonne.

På mobil vil jeg ha to like brede kolonner (1fr 1fr tok seg av det), MEN jeg har jo 9 knapper, så da la den niende knappen seg til venstre. Jeg har forsøkt å få den aller siste midtstilt.

Men rekkefølgen var fin å kunne manipulere! Takk for den

Endret 21. august 2022 av Zenobia

[Zenobia]

Trodde ikke du var tilgjengelig før etter kl 20, så jeg er egentlig inni noe annet nå. Men er tilbake om ca 45 min

[proghodet]

10 minutter siden, Zenobia said:

 

  Nai. Da blir det bare én kolonne.

På mobil vil jeg ha to like brede kolonner (1fr 1fr tok seg av det), MEN jeg har jo 9 knapper, så da la den niende knappen seg til venstre. Jeg har forsøkt å få den aller siste midtstilt.

Men rekkefølgen var fin å kunne manipulere! Takk for den

Så rart.. her ser det sånn ut:

[Zenobia]

proghodet skrev (22 minutter siden):

Så rart.. her ser det sånn ut:

Hey, jeg snudde til horisontalt, og da ble det helt riktig! (640 x 360) Nesten sånn som over, bare med INTEGRA-overskrift, ikke hele tittelen

Men når jeg snur den vertikalt, blir det bare én kolonne.

Ja, det var ordentlig pussig

 

Endret 21. august 2022 av Zenobia

[proghodet]

2 minutter siden, Zenobia said:

Hey, jeg snudde til horisontalt, og da ble det helt riktig! (640 x 360) Nesten sånn som over, bare med INTEGRA-overskrift, ikke hele tittelen

Men når jeg snur den vertikalt, blir det bare én kolonne.

Ja, det var ordentlig pussig

 

Prøv for moro skyld å sett flex til 0 0 29% - kanskje det bare er en bitteliten piksel som skal til?

[Zenobia]

Nå endret jeg til en annen virtuell mobil (412 bred) i Firefox, og den blir riktig! Den forrige var 360 bred.

Prøver 0 0 29 nå ...

[Zenobia]

Ikke 29, men 28 gjorde det!

Fininnstiller litt mer her nå ...

Forandret bare i Firefox (takk for tipset)

[Zenobia]

Da ser det ut til at jeg (du) kom i mål. Skal synke med GitHub etter hvert.

Bredde 360 ser ut til å gå greit, men bredde 320 vil den ikke. Da blir det bare én kolonne. Hvis jeg tvinger, med å justere prosenter ytterligere ned, begynner knappene å ikke ville være like store. Kan hende jeg kan justere men hvilken knapp som går nederst, men jeg tenkte det skulle være English-knappen.

Tusen takk for hjelpen!

Så da måtte vi over til flex i mobil-visning. 0 0 30 Står for over under og sidene?

[proghodet]

4 minutter siden, Zenobia said:

Bredde 360 ser ut til å gå greit, men bredde 320 vil den ikke. Da blir det bare én kolonne. Hvis jeg tvinger, med å justere prosenter ytterligere ned, begynner knappene å ikke ville være like store. Kan hende jeg kan justere men hvilken knapp som går nederst, men jeg tenkte det skulle være English-knappen.

 

Ville ikke bekymret meg for dette - er vel ikke veldig mange mobiler som har 320px i bredde de fleste er nok større i alle fall.

[Zenobia]

proghodet skrev (1 minutt siden):

Ville ikke bekymret meg for dette - er vel ikke veldig mange mobiler som har 320px i bredde de fleste er nok større i alle fall.

Da er forsiden løst! Tusen millioner takk   Nå har jeg akkurat fått knappene der de skal være med pseudo-klasse og allting! Skjønner at pseudo betyr at jeg ikke egentlig går inn i elementet og kaller det class="osv"? Eller er det noe jeg ikke fikk med meg?

Synker med GitHub nå...

[proghodet]

6 minutter siden, Zenobia said:

Så da måtte vi over til flex i mobil-visning. 0 0 30 Står for over under og sidene?

Verdiene står for noe som heter flex-shrink, flex-grow, og flex-basis. Det er litt komplisert å forklare, men noen har garantert forklart det på nett, hvis du er nysgjerrig

[proghodet]

Just now, Zenobia said:

Skjønner at pseudo betyr at jeg ikke egentlig går inn i elementet og kaller det class="osv"? Eller er det noe jeg ikke fikk med meg?

Helt riktig!