レスポンシブルウェブサイトの公開スペース

Question

私はいくつかのコードに問題があります。私はこのウェブサイトをレスポンシブにしようとしていますが、それを縮めてアイテムが隣にある代わりに「下になる」場合、 アイテムが特定の最小幅まで縮小し、それが適合しない場合、アイテムがもう一度大きくなり、アイテム自体が大きくなって大きく見えるので、大きなギャップを残してしまうのが好きです。ここで

body { 
 
    margin: 5% 7%; 
 
    background-color: #A07429; 
 
} 
 

 
main { 
 
    overflow: hidden; 
 
    background-color: #F2C473; 
 
    border: 2px solid black; 
 
    border-radius: 80px; 
 
    padding-top: 10%; 
 
    padding-bottom: 10%; 
 
    padding-left: 6vw; 
 
    padding-right: 11vw; 
 
} 
 

 
.item { 
 
    margin-left: 5vw; 
 
    min-width: 250px; 
 
    max-width: 320px; 
 
    width: 100%; 
 
    float: left; 
 
    vertical-align: middle; 
 
    background: #543E18; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 200%; 
 
    margin-bottom: 10%; 
 
    display: inline-block; 
 
} 
 

 
img.itemimg { 
 
    width: 90%; 
 
    margin: 5%; 
 
}

<main> 
 
    <div class="item"><img class="itemimg" src="media/pic1.JPG" alt="refresh!"> 
 
    <p>link1</p> 
 
    </div> 
 
    <div class="item"><img class="itemimg" src="media/pic2.jpg" alt="refresh!"> 
 
    <p>link2</p> 
 
    </div> 
 
    <div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!"> 
 
    <p>link2</p> 
 
    </div> 
 
    <div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!"> 
 
    <p>link1</p> 
 
    </div> 
 
</main>

Answer 1

あなたは、このギャップを削減する、すべてのdivを中央に

display: flex; 
flex-wrap: wrap; 
justify-content: center; 

を使用することができます。 Flexbox

body { 
 
    margin: 5% 7%; 
 
    background-color: #A07429; 
 
} 
 

 
main { 
 
    overflow: hidden; 
 
    background-color: #F2C473; 
 
    border: 2px solid black; 
 
    border-radius: 80px; 
 
    padding-top: 10%; 
 
    padding-bottom: 10%; 
 
    padding-left: 6vw; 
 
    padding-right: 11vw;  
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    margin-left: 5vw; 
 
    min-width: 250px; 
 
    max-width: 320px; 
 
    width: 100%; 
 
    float: left; 
 
    vertical-align: middle; 
 
    background: #543E18; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 200%; 
 
    margin-bottom: 10%; 
 
    display: inline-block; 
 
} 
 

 
img.itemimg { 
 
    width: 90%; 
 
    margin: 5%; 
 
}

<main> 
 
    <div class="item"><img class="itemimg" src="media/pic1.JPG" alt="refresh!"> 
 
    <p>link1</p> 
 
    </div> 
 
    <div class="item"><img class="itemimg" src="media/pic2.jpg" alt="refresh!"> 
 
    <p>link2</p> 
 
    </div> 
 
    <div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!"> 
 
    <p>link2</p> 
 
    </div> 
 
    <div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!"> 
 
    <p>link1</p> 
 
    </div> 
 
</main>

Answer 2

私はあなたhttps://jsfiddle.net/sandymizz/qsv0tzvr/

body{ 
 
     margin: 5% 7%; 
 
     background-color:#A07429; 
 

 
    } 
 

 
    main{ 
 
     overflow: hidden; 
 
     background-color: #F2C473; 
 
     border: 2px solid black; 
 
     border-radius: 80px; 
 
     padding-top: 10%; 
 
     padding-bottom: 10%; 
 
     padding-left: 6vw; 
 
     padding-right: 11vw; 
 
    } 
 

 
    .item{ 
 
    margin: 0 5%; 
 
    width: 40%; 
 
    float: left; 
 
    vertical-align: middle; 
 
    background: #543E18; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 200%; 
 
    margin-bottom: 10%; 
 
    display: inline-block; 
 
    } 
 

 
    img.itemimg{ 
 
     width: 90%; 
 
     margin: 5%; 
 
    } 
 
    
 
    @media all and (max-width:767px){ 
 
     .item { 
 
    width: 90%; 
 
    } 
 
    }

<main> 
 
    <div class="item"><img class="itemimg" src="media/pic1.JPG"       alt="refresh!"><p>link1</p></div> 
 
    <div class="item"><img class="itemimg" src="media/pic2.jpg"     alt="refresh!"><p>link2</p></div> 
 
    <div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!"><p>link2</p></div> 
 
    <div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!"><p>link1</p></div> 
 
    </main>

Answer 3

ためworlsがあなたのCSSファイルでメディアクエリを使用してみてくださいことを願って確認してください、あなたが必要とするすべてであります以下の例のように。 それはあなたの問題を確実に解決します。

@media screen and (min-width:320px) and (max-width:480px) 
{ 
    //insert your code here 
}