Блог

Я использую тему Backpack Traveler от Mikado, и меня не устраивает ширина моих статей при просмотре с мобильного устройства. У меня есть идея, но я хотел спросить мнение здесь, прежде чем я это сделаю, поскольку я новичок.

Это код, который в настоящее время использует тема (я просто добавлю 2 примера):

 @media only screen and (max-width:768px) {
    .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
    .mkdf-header-vertical .mkdf-container-inner,
    .mkdf-header-vertical .mkdf-grid,
    .mkdf-header-vertical .mkdf-row-grid-section {
        width: 600px
    }
}

@media only screen and (max-width:680px) {
    .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
    .mkdf-header-vertical .mkdf-container-inner,
    .mkdf-header-vertical .mkdf-grid,
    .mkdf-header-vertical .mkdf-row-grid-section {
        width: 420px
    }
}
  

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

1. Создайте больше строк кода @media query на каждые 20 пикселей (скажем, от 320 пикселей до 640 пикселей) Это 16 строк строк запроса @media с размером пикселя 320 340 360 и т.д.
2. Установите ширину в calc (100% — 20 пикселей)

Это точно не лучший способ сделать это, но у меня нет других идей, поэтому я решил спросить здесь.

Редактировать: я связался с разработчиками темы, и они сказали мне использовать этот код вместо

 @media only screen and (max-width: 480px){
 .single-post .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element, 
 .mkdf-container-inner, .mkdf-grid, .mkdf-row-grid-section {
 width: X; 
 } 
}
  

Я предполагаю, что .single-post будет применяться только к самим статьям, поэтому ничего не сломается при изменении размера ширины. Я установил ширину на 95% для максимальной ширины 480 пикселей. Я сделаю то же самое для 680px, 768px и 1024px.

Правка 2: я опробовал новые изменения на Samsung Galaxy S9 , и все выглядит великолепно. Некоторые элементы больше не центрируются на домашней странице, но я разберусь с этим.

Вы могли бы использовать единицы vw (ширина области просмотра) и уменьшить (или, возможно, даже устранить) необходимость в этих @media точках останова, например, вот так:

 .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
.mkdf-header-vertical .mkdf-container-inner,
.mkdf-header-vertical .mkdf-grid,
.mkdf-header-vertical .mkdf-row-grid-section {
    width: 95vw;
}
  

vw Единица измерения представляет собой 1% ширины области просмотра (размер окна браузера), поэтому 95vw будет составлять 95% ширины окна браузера (или ширины экрана для полноэкранных браузеров, таких как телефоны и планшеты), независимо от размера устройства.

РЕДАКТИРОВАТЬ: Согласно комментарию FluffyKitten, было бы лучше использовать старый добрый, % чем vw . Если элементы находятся в одном контейнере или разных контейнерах, но одинаковой ширины, то было бы лучше что-то вроде следующего:

 .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
.mkdf-header-vertical .mkdf-container-inner,
.mkdf-header-vertical .mkdf-grid,
.mkdf-header-vertical .mkdf-row-grid-section {
    width: 95%;
}
  

Кстати. % это способ более обратной совместимости, чем точки останова vw или @media .

В этом случае все находится под .mkdf-header-vertical контролем, поэтому, если существует только один контейнер этого класса или контейнеры этого класса имеют одинаковую ширину, и если .elementor-widget-wrap это 100% от родительского .mkdf-header-vertical , то эти элементы действительно будут иметь одинаковую ширину.

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

 .mkdf-header-vertical { 
    padding-left: 20px;
    padding-right: 20px;
}
  

и установите вышеуказанные значения ширины на 100% .