Проблема с максимальной шириной сетки - при переходе на 90% уходит со страницы - PullRequest
Новая
       42

Проблема с максимальной шириной сетки - при переходе на 90% уходит со страницы

1 голос
/ 17 июня 2019

У меня проблемы с выяснением, почему, когда я изменяю переменную max-width со 100% до 90%, часть сетки снимает страницу.Если вам нужно увидеть больше кода, пожалуйста, дайте мне знать.Буду очень признателен за помощь, спасибо. 

/* Seasonal Events Grid 
-------------------------------*/

div.jk-seasonal > div {
  padding: 0 20px;
  color: #fff;
}

@media screen and (min-width: 1024px) {
* { box-sizing: border-box; }
div.jk-seasonal {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
    display: grid;
  grid-column: repeat(6, 1 fr);
  grid-auto-rows: minmax(100px, auto);
}
}

/* Seasonal Event1 - Big One
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event1 {
 grid-column: span 1 / 2;
 grid-row: 1 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner11.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 500px;
 margin:5px;
}
}


/* Seasonal Event2 - Middle Top
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event2 {
 grid-column: 2 / 3;
 grid-row: 1 / 4;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 300px;
 margin:5px;
}
}


/* Seasonal Event3 - bottom right
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event3 {
 grid-column: 3 / 3;
 grid-row: 4 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 300px;
 margin:5px;
}
}


/* Seasonal Event4 - Bottom middle
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event4 {
 grid-column: 2 / 3;
 grid-row: 4 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 300px;
 margin:5px;
}
}



div.jk-seasonal > div {
    padding: 0 10px;
}


<div class="jk-seasonal">
  <div class="jk-event1"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-vip-wimbledon-tickets"><h3>Strawberries<br>and<br>Perfect Seats</h3></a><p class="jk-seasonal-text">Have the wedding of your dreams professionally planned and managed making sure your special day goes the way you planned.</p><button class="w3-button w3-round">More Information</button>
</div>
  <div class="jk-event2"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-event2"><h4>Event 2<br>Name</h4></a><button class="w3-button w3-round">More Information</button></div>
  <div class="jk-event3"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-event3"><h4>Event 3<br>Name</h4></a><button class="w3-button w3-round">More Information</button></div>
  <div class="jk-event4"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-event4"><h4>Event 4<br>Name</h4></a><button class="w3-button w3-round">More Information</button></div>
</div>

при 100% Макс. Ширина

при 90% ширине

Мне также кажется, что я получаю сообщение об ошибке в пользовательской области CSS WordPress при использовании «fr», я также добавил на снимке экрана:

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

...