Как сделать padding отзывчивым в мобильном представлении? - PullRequest
Новая
       10

Как сделать padding отзывчивым в мобильном представлении?

0 голосов
/ 01 июля 2018

Я использую WordPress, и я использовал CSS, чтобы сделать ширину моих страниц «О нас» и «Контакт» более центрированной и меньшей, добавив отступы. Однако, когда я делаю это, особенно в мобильном представлении (я думаю, с планшетом все в порядке), из-за этого с обеих сторон появляется белое пространство.

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

Страница "Контакты" моего сайта в мобильном представлении

Страница моего портфолио "Портфолио" в мобильном представлении

Вот ссылка на мой сайт: http://www.lisaweng.com/contact/

Существует ли CSS, который делает эти страницы нормальными или полной ширины при просмотре в мобильном представлении, даже если я добавляю заполнение, например, как страница портфолио просматривает полную ширину на мобильном устройстве, даже если на обеих сторонах экрана есть пустое пространство, когда смотреть на настольную версию?

P.S. для CSS для заполнения элементов страницы «О нас» и «Контакт» я использовал проценты, а не пиксели. Я не уверен, почему он не совсем адаптивен при просмотре в мобильном режиме.

Вот как выглядит мой CSS для страниц «О нас» и «Контакт»: 

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

и 

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

Есть ли код, чтобы это исправить? Или есть идеи, почему это так? Если есть код для исправления мобильного представления, будет ли он таким же для планшета или же у планшета также есть CSS для исправления отклика на то, каким он должен быть?

1 Ответ

0 голосов
/ 01 июля 2018

Использование запросов @media для добавления точек останова в CSS.

Вам необходимо использовать медиа-запросы в вашем CSS-коде для добавления определенных точек останова.

Добавление этого в таблицу стилей может помочь: 

@media only screen and (max-width: 950px) {
   .cf7_custom_style_1 {
      padding-left: 10%;
      padding-right: 10%;
   }
}

@media only screen and (max-width: 600px) {
   .cf7_custom_style_1 {
      padding-left: 0;
      padding-right: 0;
   }
}

Использование приведенного выше кода добавляет точки останова в 950px и 600px. Это означает, что , если размер окна = 950px, измените этот класс CSS на эти свойства .

...