Скрыть определенные изображения, когда в мобильном

Question

Поэтому я пытаюсь скрыть две из шести фотографий пользователя (последние две), когда они находятся на мобильном / маленьком экране.Я знаю, я буду использовать код @media, но какой код я напишу, чтобы скрыть последние две фотографии?

Код на моем сайте довольно обширный, поэтому, вероятно, было бы легче посетить данную страницу и использовать «осмотреть», чтобы увидеть код.Я пытался скрыть img (ы) с некоторым кодом CSS, но это не сработало.Поэтому я понятия не имею, что я делаю не так! См. Страницу вопроса @ Zoeaa.com

Буду очень признателен за помощь и обратную связь!Если есть что-то, я могу сделать, чтобы улучшить этот вопрос, пожалуйста, дайте мне знать!

Фото выпуска

Answer 1

Может быть, вы можете сделать это так.Я всегда использую этот метод, когда хочу что-то скрыть на веб-странице, при этом вы можете скрыть любой элемент, который вы хотите

, но он все еще зависит от структуры вашего кода.Есть много способов скрыть элемент.Я надеюсь, что это поможет вам!

@media only screen and (max-width: 768px) {

    //Create Class that will only hide on mobile size.
    //Add the class desktop-only to the image(or LI) that you want to hide on mobile view.
    .desktop-only {
        display: none;
    }
}

Answer 2

Примерно так:

//for screen size smaller than 768px (mobile)
@media only screen and (max-width: 768px)
{
    //hide the last two list items
    .pop_members ul li:nth-last-child(-n+2) { 
        display:none; 
    }
}

Это позволит скрыть два последних элемента списка из списка, если размер экрана меньше 768 пикселей.