Как сделать мою сетку изображений отзывчивой / изменить размер и установить точки останова - PullRequest
Новая
       23

Как сделать мою сетку изображений отзывчивой / изменить размер и установить точки останова

0 голосов
/ 13 июня 2019

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

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

Любая помощь будет очень признательна.Я также думаю, что моему CSS понадобится немало работы, но на данный момент он выглядит хорошо.

спасибо

CSS

* { box-sizing: border-box; }
.jk-main-categories {
	max-width: 800px;
  margin: 0 auto;
}

.jk-main-categories > div {
  padding: 0 20px;
  color: #fff;
}
.jk-main-categories {
  display: grid;
  grid-template-columns: repeat(3, 1 fr);
  grid-auto-rows: minmax(100px, auto);

}

.jk-weddings {
  grid-column: 1 / 4;
  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;
	max-width: 100%;
	min-width: 500px;
	margin:5px;
}


.jk-party-planning {
  grid-column: 4 / 7;
  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;
	min-width: 300px;
  max-width: 100%;
	margin: 5px;
}

.jk-corporate-events {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner15.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	min-width: 300px;
	max-width: 100%;
	margin: 5px;
}

a#jacqueline-kennedy-luxury-weddings > h2 {
  color: white;
	line-height: 1.1em;
	text-shadow: 1px 1px 1px rgba(51,51,51, 0.5)
}

a#jacqueline-kennedy-luxury-party-planning > h3 {
  color: white;
	line-height: 1.1em;
text-shadow: 1px 1px 1px rgba(51,51,51, 0.5)
}

a#jacqueline-kennedy-corporate-event-planning > h3 {
  color: white;
	line-height: 1.1em;
	text-shadow: 1px 1px 1px rgba(51,51,51, 0.6)
}

div.jk-weddings > p {
	max-width: 400px;
	min-width: 300px;
	line-height: 1.3em;
}
<div class="jk-main-categories">
  <div class="jk-weddings"><a href="http://www.jacquelinekennedy.co.uk/appointments" id="jacqueline-kennedy-luxury-weddings"><h2>Plan<br>Your<br>Perfect<br>Day</h2></a><p>Have the wedding of your dreams professionally planned and managed making sure your special day goes the way you planned.</p></div>
  <div class="jk-party-planning"><a href="http://www.jacquelinekennedy.co.uk/appointments" id="jacqueline-kennedy-luxury-party-planning"><h3>Luxury<br>Party<br>Planning</h3></a></div>
  <div class="jk-corporate-events"><a href="http://www.jacquelinekennedy.co.uk/appointments" id="jacqueline-kennedy-corporate-event-planning"><h3>Corporate<br>Events</h3></a></div>
</div>

Я предполагаю, что мне нужен какой-то медиа-CSS, но я думаю, что загнал себя в угол с тем, как я до сих пор делал вещи.

1 Ответ

0 голосов
/ 13 июня 2019

Если вы хотите использовать медиа-запросы для более конкретных опций не забудьте добавить это: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Вам придется разделить несколько строк кода хотя бы базовый «стиль destop» и простой «мобильный стиль».

Как пример для настольных компьютеров: 

@media screen and (min-width: 1024px) {
// specific for desktops 
.jk-weddings {
 grid-column: 1 / 4;
 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;
 max-width: 100%;
 min-width: 500px;
 margin:5px;
}
}

Как очень быстрый и грязный пример для мобильных устройств: 

@media screen and (max-width: 1023px) {
.jk-weddings {
 grid-column: 1 / 4;
 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;
 max-width: 100%;
 margin:5px;
}
}

Если вы посмотрите на этот простой пример, все, что я сделал удаляет минимальную ширину.

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

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

Может быть немного больше информации о медиа-запросах и о том, как их использовать нашел прямо здесь:

https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp

...