如何在智能手机上更改此代码

时间:2015-06-09 11:04:31

标签: html css magento

如何将此两个列页面调整为smartphone上的一列?目前,它仍会使smartphone上的两列成为文本框。

我在magento工作,所以我把CSS写入html。

https://jsfiddle.net/mastervision/47jtcxrm/



<!DOCTYPE html>
<html>
  <head>
    <style> 
      .newspaper {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 2;
        -webkit-column-gap: 40px;
        -webkit-column-rule-style: outset;
        -webkit-column-rule-width: 1px;

        /* Firefox */
        -moz-column-count: 2;
        -moz-column-gap: 40px;
        -moz-column-rule-style: outset;
        -moz-column-rule-width: 1px;

        column-count: 2;
        column-gap: 40px;
        column-rule-style: outset;
        column-rule-width: 1px;
      }
    </style>
  </head>
  <body>


    <div class="newspaper">
      <p><strong><span style="font-size: x-large;">TEST FAQ - h&auml;ufig gestellte Fragen</span><br /></strong></p>
      <p><strong><br /></strong></p>
      <p><span style="font-size: medium;"><strong>STOCK 11 ist Masskonfektion&auml;r. Was bedeutet das genau?</strong></span></p>
      <p><span style="font-size: small;">Masskonfektion heisst, ausgehend von Standard-Schlupfteilen eine in Bezug auf Mass und Design genau auf den Kunden abgestimmte Kleidung zu fertigen. Das Team von Stock 11 macht es sich nicht leicht f&uuml;r seine Kunden den perfekten &bdquo;fit&ldquo; hinzubekommen. Mit 11 Mass-Variablen f&uuml;r Hemden und 18 f&uuml;r Anz&uuml;ge sowie zahlreichen Gestaltungsoptionen f&uuml;r Designvarianten kommen wir sehr nah an eine Feinmass-Fertigung heran.<br /></span></p>
      <hr />
      <p><strong></strong><span style="font-size: medium;"><strong>Wie ist der Bestellprozess bei STOCK 11?</strong></span></p>
      <p><span style="font-size: small;">Sie vereinbaren einen Termin bei uns an der Stockerstrasse im Herzen von Z&uuml;rich. F&uuml;r&nbsp;Ihren Besuch bei uns im Atelier&nbsp;nehmen Sie sich bitte&nbsp;eine Stunde bis 90 Minuten Zeit. So bleibt uns&nbsp;gen&uuml;gend Zeit um 1) Ihre K&ouml;rpermasse zu nehmen, 2) Ihre Pr&auml;ferenzen bez&uuml;glich Stil und Details zu besprechen und 3) passende Stofffabrikate auszuw&auml;hlen. Wir&nbsp;leiten Ihre&nbsp;Bestellung umgehend an unsere Manufaktur-Partner weiter.&nbsp;Sobald Ihre Kleidung bei uns eingetroffen ist werden wir Sie f&uuml;r eine Anprobe einladen. Daf&uuml;r nehmen Sie sich bitte wieder 30 Minuten Zeit. Wenn es noch &Auml;nderungen geben sollte, werden wir diese&nbsp;innert wenigen Tagen in Z&uuml;rich umsetzen und Sie kommen f&uuml;r die finale Anprobe bei uns vorbei. Bei Erstbestellungen von drei Hemden oder mehr empfehlen wir zun&auml;chst nur ein Hemd zu bestellen. Vielleicht sind noch Kleinigkeiten, die optimiert werden k&ouml;nnen.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong></strong><strong>Wie lange dauert es, bis mein Hemd/Anzug zur Anprobe bereit ist?</strong></span></p>
      <p><span style="font-size: small;">Gut Ding will Weile haben. In der Regel sind unsere Anz&uuml;ge und Hemden innerhalb von&nbsp;vier bis sechs Wochen zur Anprobe bereit. Wenn&nbsp;nach der Anprobe &Auml;nderungen&nbsp;n&ouml;tig sind, werden wir diese innert&nbsp;f&uuml;nf Arbeitstagen&nbsp;f&uuml;r Sie erledigen. Express-Fertigungen sind gegen Aufpreis m&ouml;glich. Express bedeutet: 2 Wochen f&uuml;r Anz&uuml;ge und Hemden.</span></p>
      <hr />
      <p><strong><span style="font-size: medium;">Muss ich bei Nachbestellungen wieder im Laden vorbeikommen?</span> </strong></p>
      <p><span style="font-size: small;">K&ouml;nnen Sie, wir freuen uns in jedem Fall &uuml;ber Ihren Besuch... Sie k&ouml;nnen aber bequem von zu Hause aus bestellen (telefonisch oder per e-mail).&nbsp;Ihre K&ouml;rpermass-Daten&nbsp;haben wir bei Ihrem letzten Besuch erfasst und festgehalten. Falls sich Ihre K&ouml;rpermasse nicht ge&auml;ndert haben, k&ouml;nnen wir f&uuml;r Sie die aktuell passende Kleidung klonen. Die&nbsp;Stoffauswahl finden Sie&nbsp;online und sie k&ouml;nnen sie dort in Ruhe durchbl&auml;ttern.</span></p>
      <hr />
      <p><strong></strong><span style="font-size: medium;"><strong>Woher nimmt STOCK 11 die Stoffe f&uuml;r Hemden und Anz&uuml;ge?</strong></span></p>
      <p><span style="font-size: small;">Unsere Premium-Stoffe beziehen wir haupts&auml;chlich aus f&uuml;hrenden Manufakturen in Italien. F&uuml;r Anzugstoffe verwenden wir&nbsp;Garne der f&uuml;hrenden Marken Ermenegildo Zegna, Drago, Vitale Barberis oder Loro Piana. Diese werden fast ausschliesslich in der Textilhochburg Biella (Italien) gewebt. Unsere Hemdenstoffe werden aus aus reiner &auml;gyptischer Baumwolle oder wie bei den Sea Island Cottons aus Baumwolle von den West Indies hergestellt. In unserer Sartorial Line verwenden wir ausschliesslich 80s - 200s Baumwolle, die von einem der &auml;ltesten und gr&ouml;ssten Traditionsbetriebe in Norditalien hergestellt wird.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Wo produziert STOCK 11 Hemden &amp; Anz&uuml;ge?</strong></span></p>
      <p><span style="font-size: small;">Unsere sorgf&auml;ltig ausgew&auml;hlten Manufakturpartner f&uuml;r Anz&uuml;ge befinden sich in Italien und&nbsp;Deutschland. Die Hemden werden vorwiegend in Italien gefertigt (Sartorial Line&nbsp;&amp; Infinity Line).&nbsp;F&uuml;r Business Line Hemden arbeiten wir mit einer jungen, nachhaltigen Manufaktur in Bangkok zusammen.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Wie detailliert kann ich mein Hemd/Anzug mitbestimmen?</strong></span></p>
      <p><span style="font-size: small;">Kurzantwort: Extrem detailliert. Auf&uuml;hrliche Antwort: Die Individualisierung bei STOCK 11 kennt fast keine Grenzen. Nebst unserem Anspruch, Ihnen das perfekt passende Hemd oder den perfekt passenden Anzug zu schneidern, haben Sie bei STOCK 11 extrem viel Freiheiten Ihre individuellen Vorstellungen umzusetzen. Um Ihnen eine Idee zu geben: F&uuml;r ein Hemd beispielsweise k&ouml;nnen Sie bei uns aus &uuml;ber 2&lsquo;500 Stoffen, 12 Kragentypen, 18 &Auml;rmel-Designs blabla w&auml;hlen. Bei Anz&uuml;gen/Vestons haben wir aktuell 500 verschiedene Stoffe im Angebot. Und hier gehen die Optionen f&uuml;r die Individualisierung noch viel weiter. Es f&auml;ngt an beim Stil (englisch, amerikanisch oder italienisch, Einreiher, Zweireiher etc.), Revers-Art, 8 Stufen der Schulterpolsterung, Anzahl und Art der Kn&ouml;pfe, 8 verschiedne Taschen/Taschentypen innen und aussen... und vieles mehr.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Was bedeutet die STOCK 11 Fitting-Garantie?</strong></span></p>
      <p><span style="font-size: small;">Erst wenn Ihnen unsere Produkte wie eine zweite Haut passen geben wir uns zufrieden. Nach dem Fitting werden wir &Auml;nderungen von unseren Schneider-Partnern in Z&uuml;rich zeitnah (innert f&uuml;nf Arbeitstagen) umsetzen.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Gehen Sie auch auf Spezialw&uuml;nsche ein?</strong></span></p>
      <p><span style="font-size: small;">Selbstverst&auml;ndlich gerne wenn es innerhalb unserer M&ouml;glichkeiten liegt (und diese sind gross)! Der Mensch und seine Individualit&auml;t stehen bei unserem Tun im Zentrum. Wir sind kein online Masskonfektionshaus, welches sich mit einer ungef&auml;hren L&ouml;sung zufrieden gibt. Wir denken langfristig und sind bem&uuml;ht, eine freundschaftliche Vertrauensbasis mit unseren Kunden zu pflegen.</span></p>
      <p><span style="font-size: small;"><br /></span></p>
    </div>

  </body>
</html>
&#13;
&#13;
&#13;

enter image description here

1 个答案:

答案 0 :(得分:2)

您可以使用媒体查询执行此操作:

JSFiddle

height

您希望为较小屏幕工作的任何内容都需要在此媒体查询中:

.newspaper {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 2;
    -webkit-column-gap: 40px;
    -webkit-column-rule-style: outset;
    -webkit-column-rule-width: 1px;

    /* Firefox */
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    -moz-column-rule-style: outset;
    -moz-column-rule-width: 1px;

    column-count: 2;
    column-gap: 40px;
    column-rule-style: outset;
    column-rule-width: 1px;
}

@media only screen and (max-width: 40em) {
    .newspaper{
        /* Chrome, Safari, Opera */ 
        -webkit-column-count :  1 ; 
        -webkit-column-gap :  0px ; 
        -webkit-column-rule-style : outset ; 
        -webkit-column-rule-width :  1px ;

        /* Firefox */ 
        -moz-column-count :  1 ; 
        -moz-column-gap :  0px ; 
        -moz-column-rule-style : outset ; 
        -moz-column-rule-width :  1px ;

        column-count :  1 ; 
        column-gap :  0px ; 
        column-rule-style : outset ; 
        column-rule-width :  1px ; 
    } 
}