5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Q:

    Bijdrager
    psteintj

    Responsive reageert op 2 delen van de website niet (goed) op ipad 3 en 4

    Ik probeer een website responsive te maken en over de hele lijn van de site gaat dit behoorlijk. Nu heb ik alleen het probleem dat 1 gedeelte van de site niet doet wat hij moet doen op de ipad 3 en 4. Bij de rubriek Gallery moeten de 3 foto’s bij het versmallen van het scherm eerst teruggebracht worden naar 2 foto’s naast elkaar en 1 er onder om daarna allemaal onder elkaar geplaatst te worden. Wanneer ik het scherm van de computer verklein gebeurd er precies wat er moet gebeuren, op de mobiele telefoon (Android) gebeurd er ook wat er verwacht wordt, alleen op de iPad 3 en 4 blijven de foto’s naast elkaar staan. Bij het contact formulier worden ronde hoeken gemaakt bij de input velden en de verzendbutton wordt geheel afgerond aan beide zijden, ook dit gebeurd alleen op de iPad 3 en 4. Kan iemand mij vertellen waar ik hier fout ga en waarom dit gebeurd.

    Ik dank voor de moeite.

    • Dit onderwerp is gewijzigd 3 jaren, 6 maanden geleden door  Night. Reden: Niet er zake doende reacties verwijderd

    Bijdrager
    rdesign

    iOS past inderdaad standaard de look van input velden en buttons aan, weet ook niet precies waarom. Je kan dit aanpassen door de speciale webkit prefix in je CSS te gebruiken.

     
    input {
        -webkit-appearance: none;
        -webkit-border-radius:0; 
        border-radius:0;
    }
     

    Bijdrager
    psteintj

    Dank voor je reactie, dit heeft inderdaad het probleem opgelost mbt de ronde hoeken. Nu heb ik geprobeerd om het probleem met de 3 foto’s in Gallery op te lossen door:

     
    .container-work {
        -webkit-appearance: listbox;
      }
     
      .img-work {
        -webkit-appearance: listitem;
      }
     

    in de responsive.css te plaatsen, maar dat heeft geen effect. Misschien ook nog een idee hoe dit probleem op te lossen is.

    Nogmaals dan voor de moeite


    Bijdrager
    Shmoo

    Zoek eens op CSS display block element.

    Het is gewoon een kwestie van stapelen en heel simpel rekenen. Je hebt drie CSS waardes nodig. display: block – float: left; – width: X;

    Die drie zijn de basis, eerst zoek je het HTML element op waar de drie afbeeldingen tussen geplaatst zijn. Meestal is dit een div element die ze ook wel container of wrapper noemen.
    In jouw geval heeft die class de naam .dummy.dummy-menu daarna zoek je de HTML elementen op waar de afbeeldingen in gestopt zijn. In jouw geval zitten ze in een unordered list dus krijg je .dummy.dummy-menu ul li <— elke item van de list geef je nu dus een display block, float left en een breedte van 50%; Je wilt immers 2 afbeeldingen naast elkaar hebben en aangezien 50% + 50% samen 100% van de container/wrapper breedte maakt zal er niet voldoende ruimte meer over zijn voor de derde afbeelding achter de tweede te plaatsen – dus wordt die auto. eronder geplaatst.

    Dan komt het moeilijke om die derde afbeelding in het midden te krijgen want die float natuurlijk nog steeds gewoon naar links.
    Dit doe je door .dummy.dummy-menu ul li:last-child { display: table; float: none; margin: 0 auto; } <– daarmee zeg je eigenlijk alleen dat het allerlaatste element geen float moet krijgen.

    Dat alles tussen de juiste @media stoppen zodat het alleen gebruikt wordt bij smallere devices en je bent klaar.

    .

    • Deze reactie is gewijzigd 3 jaren, 6 maanden geleden door  Shmoo.
    • Deze reactie is gewijzigd 3 jaren, 6 maanden geleden door  Shmoo.

    Bijdrager
    psteintj

    Shmoo, enorm bedankt. Dat was de oplossing, ik heb een tijd zitten kijken waar het verschil hem nu zat met hoe ik eea in elkaar had gezet en hoe jij eea in lekaar zet, maar als ik het nu goed zie is mijn grootste fout dat ik i.p.v. alle waardes aan “dummy.dummy-menu ul li” toe te kennen deze waardes aan b.v “” heb toegekend, waardoor de hover effecten die per afbeelding draaien niet mee werden genomen en daar door hun eigen koers bleven waren, wat weer tot gevolg had dat de responsiviteit anders liep dan verwacht. Het enig dat ik mij nog afvraag hoe het kan dat als ik in Firefox Responsive design weergave gebruikte werkte het wel zoals ik zou willen, alleen op de iPad werkte het tegen, maar nu werken allebei zoals verwacht. Nogmaals dank, voor je (ik zag: om 1 uur vannacht verstuurde) hulp.

    Ps bij de laatste css afbeelding die je hebt toegevoegd, ontbreekt een klein stuk, je ziet namelijk de kop van li, maar niet wat er verder staat. Is mogelijk dat je die ook nog plaatst zodat ik zeker weet dat ik alles goed heb.

    Groet

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.