Отзывчивость: как решить неправильное количество столбцов отображения сетки в виде планшета? - PullRequest
Новая
       20

Отзывчивость: как решить неправильное количество столбцов отображения сетки в виде планшета?

0 голосов
/ 26 сентября 2019

У меня есть следующее: 

<div class="content" >

/* This is loop 25 times since I have 25 products, so 25 contents **/
    <div class="nested" v-for="product in products"> 
        <div class="one">{{product.Name}}</div>
        <div class="two">{{ product.percentage }}</div>
        <div class="three"><div><img :src="product.image"></div></div>
        <div class="four">{{ product.description }}</div>
        <div class="five">€ {{ product.original_price }}</div>
        <div class="six">€ {{ product.new_price }}</div>
        <div class="seven"><button>Remove</button></div>
        <div class="eight"><button>More Info</button></div>
    </div>
</div>

/* Tablet View */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    .content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
        grid-gap: 10px;

    }

}

/* Mobile View */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {


    .content{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin: 0 auto;
        grid-gap: 10px;

    }

}
/* Laptop/Desktop View */
@media only screen and (min-width : 1224px) {

.content{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 auto;
    grid-gap: 10px;
}
}

/* A nested grid(inner grid of content grid) with 4 columns and 5 rows */
.nested{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
    border-top: 6px solid #E20A16;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;

}

Я пытаюсь получить 2 столбца сетки Content в виде планшета, 1 столбец в мобильном и 5 столбцов в ноутбуке / настольном компьютере.

Как это:

Вид планшета 

* *
* *
* *
* *
* *
* *
* *
* *
* *
*

Мобильный вид 

*
*
*
so on till 25..

Вид ноутбука / рабочего стола 

* * * * *
* * * * *
* * * * *
* * * * *
* * * * *

Но вместо этого я получаю 1 столбец в виде планшета.Я не уверен, что я делаю не так здесь.Был бы очень признателен за помощь.

РЕШЕНИЕ: последовал ответ Адриана П .: Обычные CSS-запросы медиа-точек Точки останова

Это сработало!

1 Ответ

1 голос
/ 26 сентября 2019 
Okay try and change the min-device-width to device-width and also maybe you should write this:-

//for laptops

    @media(min-width:1224px) {
    // Code goes here
    }

// for tablets
@media (min-width: 768px) and (max-width:1024px) {
//code goes here
}

// for phones
@media(max-width: 767px) {
  // Code goes here
}
...