Div'er blir merkelige på iPhone

Aafloey · 26. mars 2016

Hei. Når jeg viser denne siden på android: http://aafloeydesigns.com/lise/index.php?page=prisliste

Så vises den riktig. På en iPhone, så ser det ut som på veldagt bilde.

Hva er galt? Er det css kodingen min som gjør det?

Endret 26. mars 2016 av Aafloey

FBEN · 26. mars 2016

Vises også riktig på Windows 10 med IE11, Chrome, Opera og på Windows Phone 10.

Mr D · 26. mars 2016

Det er vel en kombinasjon av dårlig nettleser, lav skjermoppløsning og låste bredder på div-er. Tips: Sjekk opp på mobiltilpassede nettsider og responsiv design. Kanskje begynne her: http://www.tek.no/artikler/fra-i-dag-vil-google-straffe-nettsider-som-ikke-er-mobiloptimaliserte/185942

Endret 26. mars 2016 av Mr D

Aafloey · 26. mars 2016

Men de er jo låst på max 900px.

Emancipate · 26. mars 2016

Jeg vet det ikke var det du spurte om, men små bokstaver er mye lettere å lese. På stor skjerm er også lyst design mye bedre for de fleste. Nå surfer nok mange på mobil, da. (Men ... der er alt for smått.) Dessuten det vanskelig å se hvilken pris som er til hvilken behandling, både pga prikkene går helt ut til venstre, og fordi det rett og slett er alt for langt i mellom.

Fonten på forsiden er såpass uklar at den oppleves som for liten (på desktop).

Jeg er heller ikke helt imponert over hvordan sida vises på android. Den er ikke responsiv så alt blir for smått. Men, det er et større problem, og det er at en del av sida har samme problemet som på iPhone. (forlover prøvetime, brudepike, etc).

Edit: Jesus, 1 mb for bakgrunnsbilde synes jeg er i drøyeste laget. Spesielt på mobil uten wifi.

Endret 26. mars 2016 av Emancipate

Emancipate · 26. mars 2016

Jeg tok en titt på koden din. Årsaken til at det blir sånn er åpenbar: Du har satt en fast bredde på pliste_left. I noen konfigurasjoner fører det til word wrapping slik at elementet opptar to linjer. Men det er ikke de andre elementene tilpasset for.

Aafloey · 26. mars 2016

Jeg har prøvd med en annen font nå. Er enig i deg på masse med kritikken, men her har jeg rett og slett hatt en veldig sta kunde, som skal ha det sånn og sånn. Prøvd å gjort det beste ut av det.

Emancipate · 27. mars 2016

Hvis kunden vil ha det sånn synes jeg det er greit. Det ser jo stort sett bra ut estetisk, og det er viktig innen den bransjen. PS. Kanskje du skulle bruke ordet bestemt isteden? Hun kan jo komme inn her og lese.

Bakgrunnsbildet kan du få ned til 650 kb uten at noen ser forskjellen, det er bare å endre på kvaliteten.

Jeg kan løse det med prikkene (at de ikke går helt til venstre, og problemet denne tråden handler rom ). Kanskje ikke så gøy å gjøre gratis for at du skal få betalt.

Edit: løse det 95% i hvert fall...

Endret 27. mars 2016 av Emancipate

Aafloey · 27. mars 2016

Hvis kunden vil ha det sånn synes jeg det er greit. Det ser jo stort sett bra ut estetisk, og det er viktig innen den bransjen. PS. Kanskje du skulle bruke ordet bestemt isteden? Hun kan jo komme inn her og lese.

Bakgrunnsbildet kan du få ned til 650 kb uten at noen ser forskjellen, det er bare å endre på kvaliteten.

Jeg kan løse det med prikkene (at de ikke går helt til venstre, og problemet denne tråden handler rom ). Kanskje ikke så gøy å gjøre gratis for at du skal få betalt.

Edit: løse det 95% i hvert fall...

Hehe, jeg gjør faktisk hele denne jobben gratis for ei vennine Men vipps, så har det gått med 30 timer

Emancipate · 27. mars 2016

Okey, jeg fant faktisk en løsning som jeg er veeeldig stolt av . Så jeg må dele den. Jeg synes selv den er genial, men den er ikke perfekt, for man må legge inn manuelle line breaks for mobil. Hvis man ikke gjør det, er det eneste som skjer at linja går litt utenfor skjermen, ikke at hele layouten ødelegges.

<!DOCTYPE html>
<html>
    
<!--
    dot leaders
-->

<head>
    <title>dot leaders</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.23.1" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    
    <style>
        body {
            color: white;
            background: black;
            background: url("http://aafloeydesigns.com/lise/design/bg2.jpg");
        }
        
        .price-row {
            display: table;
            border-spacing: 0px;
            border-collapse: collapse;
            width: 100%;
            max-width: 900px;
            /*min-width: 460px;
            /*border: 1px solid rgba(255, 255, 255, 0.2);*/
        }
         
        
        .treatment {
            display: table-cell;
            width: 0px;
            
            vertical-align: bottom;
            padding: 0px;
            padding-right: 0.2em;
            white-space: nowrap;
            /*border: 1px dotted blue;*/
            
        }
        
        .leader  {
            display: table-cell;
            width: 100%;
            
            vertical-align: bottom;
            user-select: none;
            /*border: 1px solid green;*/
        }
        
        .leader-inside {
            width: 100%;
            display: inline-block;
            border-bottom: 1px dotted #444;
            margin-bottom: 3px;
        }
        
        .price {
            display: table-cell;
            width: 0px;
            
            text-align: right;
            vertical-align: bottom;
            padding-left: 0.2em;
            
            /*border: 1px solid rgba(255, 0, 0, 0.2);*/
        }
        
        br.small {
            display: none;
        }
        @media only screen and (max-width: 25em) {
            br.small {
                display: initial;
            }
        }
        

    </style>
</head>

<body>
    <h3>
      ØYENBRYN
    </h3>

    <section class="price-row">
            <span class="treatment">
                Hårstyling kveld
            </span>
            <span class="leader">
                <span class="leader-inside"> </span>
            </span>
            <span class="price">
              350,-
            </span>
    </section>
    
    <h3>
      ØYENBRYN
    </h3>    
        
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">Brud- hår og makeup </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">1.500,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">Kun hår eller sminke </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">800,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">Brud- prøvetime </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">500,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">*forlover/brudens mor<br class="small">- hår og makeup </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">600,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">*forlover/brudens mor<br class="small">- kun hår eller makeup </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">400,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">*forlover- prøvetime </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">300,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">*brudepiker hår, barn </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">200,-</span></div>
</div>
<br />
<div class="price-row">
  <div class="treatment"><span class="prisliste_font">Brudepiker voksne, hår eller makeup </span></div>
  <div class="leader"><span class="leader-inside"> </span></div>
<div class="price"><span class="prisliste_font_price">300,-</span></div>
</div>
    
</body>

</html>

kjekset · 27. mars 2016

I 2016 burde alle sider være responsiv. Google kom nylig med en uttalelse at de vil belønne responsive sider bedre i Google-søk. Så absolutt noe å lære seg hvis du ikke kan det fra før. Veldig enkelt

Emancipate · 27. mars 2016

Det er ikke alltid så enkelt hvis man vil ha perfekt resultat.

Aafloey · 28. mars 2016

Ser ut til at jeg løste problemet med å endre størrelse på font, og i tillegg flytte litt på div'er.

Merkelig store bokstaver som blir på iphone, kontra android...

Joda, responsive er herlig det. Men som Ermancipate påpeker, ikke alltid den beste løsningen heller.

28. mars 2016

Joda, responsive er herlig det. Men som Ermancipate påpeker, ikke alltid den beste løsningen heller.

Hørt sånt vås. Handler bare om å sette seg inn i hvordan responsivt design fungerer teknisk, og det er ærlig talt ikke veldig komplisert generelt sett. At responsivt design "ikke alltid er den beste løsningen" er også noe tøv. Selvfølgelig er en responsiv løsning bedre enn en ikke-responsiv, for det lar brukere ta nytte av nettsiden helt uavhengig av enhet, og i våre dager er det nærmest en selvfølge at brukeropplevelsen skal være god uansett skjermstørrelse.

Emancipate · 28. mars 2016

Responsivt er den beste løsningen, men ikke alltid den enkleste løsningen. Å lage siden så den fungerer greit på mobil bør ikke ta så mye tid, så det bør man klare. Men å lage den perfekt tar mer tid.

Endret 28. mars 2016 av Emancipate

Logg inn

Div'er blir merkelige på iPhone

Anbefalte innlegg

Aafloey

Lenke til kommentar

Videoannonse

FBEN

Lenke til kommentar

Mr D

Lenke til kommentar

Aafloey

Lenke til kommentar

Emancipate

Lenke til kommentar

Emancipate

Lenke til kommentar

Aafloey

Lenke til kommentar

Emancipate

Lenke til kommentar

Aafloey

Lenke til kommentar

Emancipate

Lenke til kommentar

kjekset

Lenke til kommentar

Emancipate

Lenke til kommentar

Aafloey

Lenke til kommentar

Gjest Slettet+1523

Lenke til kommentar

Emancipate

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer