Как избежать горизонтальной прокрутки в режиме рабочего стола в html / css

Question

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

Я создал для нее скрипку , чтобы было легко вносить изменения.

Рабочий стол, который я хочу видеть на скрипке:

Коды CSS, которые я использовал в скрипте дляполучить горизонтальную прокрутку:

.squares {
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 1rem;
    position: relative;
    width: 70%;
    max-width: 1080px;
    overflow-x:auto;
    margin: auto;
}

Постановка задачи:

Мне интересно, какие изменения я должен внести в скрипту выше, чтобы в представлении рабочего стола былонет горизонтальной прокрутки.Мобильный обзор выглядит отлично в скрипке .

Answer 1

Используйте медиа-запросы, чтобы изменить свой CSS, чтобы включить overflow-x:hidden вместо overflow-x:auto

РЕДАКТИРОВАТЬ:

Вы хотите это ...

@media screen and(min-width:769px) {
    .squares {
        overflow-x:hidden;
    }
 }

Это предназначается для всего, что больше размера планшета (но не для портретного iPad), надеюсь, это поможет.