Ondersteuning » Thema en CSS/opmaak » Voorwaardelijke opmaak iPhone

  • Opgelost El Pablo

    (@el-pablo)


    Ik zou graag het offerte formulier op mijn website http://www.boo-yah.be/offerte/ voorwaardelijke stylen. Nu zijn het twee kolommen, maar ik zou graag hebben dat op een iPhone de kolommen onder elkaar komen te staan en de hele breedte van het scherm innemen. Zo heb ik het op dit moment gedaan:

    <div class=”linker_kolom”>
    <p>Uw naam [text* your-name class:formulier_rechts]</p>
    <p>BTW nummer [text your-vatnumber class:formulier_rechts]</p>
    <p>E-mailadres [email* your-email class:formulier_rechts]</p>
    <p>Tel/GSM [text* your-phone class:formulier_rechts]</p>
    </div>

    <div class=”rechter_kolom”>
    <p>Bedrijf [text your-company class:formulier_rechts]</p>
    <p>Adres [text* your-address class:formulier_rechts] </p>
    <p>Postcode [text* your-postcode class:formulier_rechts] </p>
    <p>Stad [text* your-city class:formulier_rechts] </p>
    </div>

    En mijn CSS:

    .linker_kolom {
    width:45%;
    display:inline-block;
    }
    .rechter_kolom {
    width:45%;
    display:inline-block
    }
    .wpcf-text {
    width:100%;
    }
    .formulier_rechts {
    width:100%;
    }

    Nu heb in geprobeerd om de volgende CSS opmaak in te geven:

    @media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
    .rechter_kolom .linker_kolom {
    display:block;
    }
    }

    Maar dit schijnt niet te lukken. En als ik er verder over nadenk, zouden dan mijn invulvelden ook niet meer in de juiste volgorde komen te staan. Iemand enig idee hoe ik dit voor mekaar krijg?

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Hoi,

    Ik zou het zo doen:

    @media screen and (max-width:767px) {
      .rechter_kolom, .linker_kolom {width:100%; float:left;}
    }

    Mvg, Guido

    Thread starter El Pablo

    (@el-pablo)

    Hoi Guido,

    werkt prima. Bedankt!

    Mooi!

    Vergeet je niet om topic op ‘resolved’ te zetten?

    Guido

    Thread starter El Pablo

    (@el-pablo)

    Hoi Guido, bijna 😉 Nog 1 vraagje. Heb net gemerkt dat als ik mijn contactpagina http://www.boo-yah.be/contact/ in portrait bekijk op mijn iPhone, de tekst in de footer ‘kantoor herenthout’ en ‘kantoor bornem’ op mekaar staat. Ik zou dus de regelafstand willen vergroten. Ik had deze code in gedachte:

    .footer widgets .widget-title {
    line-height:25px !important;
    }

    Maar helaas, ze doet het niet. Enig idee waarom en welk de juiste code moet zijn?

    Thread starter El Pablo

    (@el-pablo)

    Hoi Guido, laat maar. Was het koppelteken vergeten tussen .footer en widgets… 🙂

    Maar alvast bedankt voor de hulp!

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Voorwaardelijke opmaak iPhone’ is gesloten voor nieuwe reacties.