0
私は2つのサイドバイサイドdivを持っていますが、どのようにレスポンスにするかわかりません。2つのサイドバイサイドディビジョン - 応答性の追加
右のボックスを左のボックスの下に600pxまたはそれ以下になるように探し、div内で行った他のセンタリングをすべて維持します。
各サイドバイサイドdivには、それぞれ.div-seller-resources-leftと.div-seller-resources-rightというクラスがあります。
すでに600pxのメディア画面を各テキストボックスの高さに使用していますので、600をブレークポイントとして使用します。
通常のサイズのブラウザでは何が行われているのか、小さい画面ではどのように見えるのかを添付してください。ご存知のように、小さな画面は、すべてのコンテンツを1つのページに収めることができれば最高です。
/* formats the seller-resources page */
.div-header-seller-resources{
font-size:30px;
line-height:32px;
margin-bottom:10px;
}
.div-detail-seller-resources{
font-size:20px;
line-height:22px;
margin-bottom:45px;
}
/*sets the height of the div so each text box is the same size no matter how much text*/
.seller-resources-height{
height: 125px;
}
/*main container of two side by side boxes*/
.div-main-container-seller-resources{
width:100%;
margin-top:30px;
text-align: center;
display: flex;
justify-content: center;
}
/*div under main container, containing both right and left seller resourcs */
.seller-resources-inner{
display: flex;
flex-direction:row;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-left{
width: 300px;
display: flex;
text-align:center;
margin:0px auto;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-right{
width: 350px;
display: flex;
text-align:center;
margin:0px auto;
}
/* sets the text box screens taller at smaller screens so they don't overlap */
@media screen and (max-width: 600px) {
.seller-resources-height{
height:200px;
}
}
@media screen and (max-width: 600px) {
div-seller-resources-left .div-seller-resources-left{
width:100%;
}
}<div class="div-main-container-seller-resources">
<div class="seller-resources-inner">
<div class="div-seller-resources-left" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/how-yodega-works/">How Yodega Works</a></div>
<div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/referrals/">Referrals</a></div>
<div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/how-to-sell-with-yodega/">How to Sell with Yodega</a></div>
<div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
</div>
<div class="clear"></div>
</div>
<div class="div-seller-resources-right" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/setting-up-your-store/">Setting Up Your Store</a></div>
<div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/advanced-product-shipping/">Advanced Shipping & Product Options</a></div>
<div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/order-management-seller-dashboard/">Order Management, Seller Dashboard & Payment</a></div>
<div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
あなたはフレックスラップを追加することができますラップ。メディアクエリの外側の.seller-resources-inner {}に入れてください。それはうまくいくはずですが、もっと具体的にしたい場合は、メディアクエリの中で試してみてください。 –
達成したいことを説明するために質問を改善できますか？私が見る限り、2つの部門が並んでいます。 2つのサイドバイサイドディビジョンのタイトルが同じ量の垂直スペースを占有したいと思っていますか？ –
こんにちはMartin Joiner、彼らは私が全画面で好きなように見えますが、小さな画面ではサイドバイサイドのdivを積み重ねたいと思います。 –