製作一個網站響應與創建主頁

兩列，可以到我的網站以這樣的方式在主頁上的帖子這兩欄也會顯示爲兩列在智能手機上進行編程的div？我使用的是一個二十12子主題，這是一個負責任的主題，但我用來創建職位的兩列的代碼是非常基本的，所以它只是組合成一列的智能手機上。下面製作一個網站響應與創建主頁

是從我的index.php代碼的摘錄，顯示我正在創建兩列的方式。這些div也有簡單的CSS符合我的style.css文件

我會很高興地採取不同的方法來創建列，如果它允許他們以展會爲智能手機上的兩個獨立的列也是如此。

該網站是在：internalcompass.us/castle如果你想看看網頁

感謝

</div> 
<div id="right-column"> 
<?php $my_query = new WP_Query('category_name=favorites'); 
    while ($my_query->have_posts()) : $my_query->the_post(); 
    $do_not_duplicate[] = $post->ID ?> 
    <?php get_template_part('content', get_post_format()); ?> 
    <?php endwhile; ?> 
</div> 
<div id="left-column"> 
<?php $my_query = new WP_Query('category_name=Recents'); 
    while ($my_query->have_posts()) : $my_query->the_post(); 
    $do_not_duplicate[] = $post->ID ?> 
    <?php get_template_part('content', get_post_format()); ?> 
    <?php endwhile; ?> 
</div>

來源

2013-08-03 kelly ann beavers

頁面的外觀由CSS規則控制。您所展示的代碼本身並不會創建一個外觀。你必須編輯主題。 – Whistletoe

謝謝，@whistletoe。一些針對計算機或ipad顯示器的CSS編輯不會直接轉換爲智能手機，所以這正是問題所在。是否有CSS編輯，我可以做，這將允許我的列並排顯示在iPhone上，而不是作爲一個單列？亞光，下面，給了很大的一塊指導，但它仍然不會影響iPhone顯示屏。 –

那麼，主題的css有規則來根據視口的寬度更改列的數量。如果您在臺式計算機上調整瀏覽器窗口的大小，您可以看到這一點。找到主題的css文件並找到它指定列寬和浮點的位置。提示可以查找「@media」表達式。 – Whistletoe

從270px寬的更改右柱和左柱寬度爲50％。然後，當你的窗口高於600像素（大多數現代手機），你仍然會看到兩列。

I.e.編輯您的style.css（不是主旋律的style.css）和變化：

div#left-column { 
    width: 270px; 
    float: left; 
    clear: none; 
    } 
div#right-column { 
    width: 270px; 
    float: right; 
    clear: none; 
    }

到：

div#left-column { 
    width: 50%; 
    float: left; 
    clear: none; 
    } 
div#right-column { 
    width: 50%; 
    float: right; 
    clear: none; 
    }

雖然你可能想這樣做後，加少許填充/保證金房。

這是你在找什麼？

來源

2013-08-03 18:48:14

哦，噓。 50％編輯實際上只解決了ipad上的問題（這很好，謝謝你）。但在iphone上，我仍然可以看到一列。我想知道爲什麼。這似乎是正確的建議。無論如何，如果任何人有另一個信息的鐘聲，讓我知道！ –

在iPhone就變成，你需要解決的視口的大小，改變響應式設計不會在如此低的分辨率下降到一列不同的問題。但是我不確定你在iPhone上顯示的任何東西是否可以在iPhone上閱讀，如果它們仍然是兩列，那麼文本將會很小。不過，如果你想這樣做，你可以改變你的媒體查詢... –

謝謝，非常感謝信息！ –

製作一個網站響應與創建主頁

回答

相關問題