#html #css #wordpress
#HTML #css #wordpress
Вопрос:
3 сообщения в блоге на этой странице больше не складываются (не реагируют) на мобильных устройствах. Может кто-нибудь помочь мне настроить это так, чтобы фрагменты сообщений в блоге накладывались друг на друга на мобильных устройствах? Мне нужно, чтобы он был отзывчивым на мобильных устройствах! Кроме того, если вы порекомендуете способ добавить ссылку «Подробнее» внизу каждого отрывка, которая приведет пользователей на страницу блога. [! [сообщения в блоге не складываются] [1]] [1]
Вот CSS, и вы найдете HTML ниже.
.blog-list {
padding: 0 8px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.blog-list li {
padding-bottom: 20px;
}
.blog-list a {
position: relative;
text-decoration: none;
height: 400px;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
@media only screen and (min-width: 700px) {
.blog-list {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (min-width: 980px) {
.blog-list {
padding-bottom: 25px;
}
.blog-list h3 {
font-size: 2.4rem;
}
.blog-list a {
display: block;
}
.blog-list a img {
transition: ease all .5s;
}
.blog-list a:hover {
opacity: .8;
}
.blog-list footer {
padding-bottom: 100px;
}
}
<section class="generic">
<div class="inner">
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/">
<img src="https://bluestoneconst.wpengine.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-6.jpg" alt="">
<h3>Asheville, NC: The Best Place To Live If You Can Live Anywhere</h3>
</a>
<p>Experienced travelers know the best place to eat in Chicago, the best hotel to stay at in New York, the best place to watch the sunset over the Rocky Mountains, the best beach on the East Coast — you get the picture.amp;nbsp;But what about moving somewhere new? This requires a different set of criteria. Vacation</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/luxury-mens-brand-chooses-bluestone-home-for-fall-catalog-photo-shoot/">
<img width="920" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg 920w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction.jpg 1024w" sizes="(max-width: 920px) 100vw, 920px">
<h3>Luxury Men’s brand chooses Bluestone custom home for Fall catalog photo shoot</h3>
</a>
<p>After a 4 day photo shoot with luxury fashion brand Peter Millar at our client’s rustic custom home for their fall/ holiday luxury men’s apparel catalog, we got some fun aerial and ground shots of our own thanks to Carl Amoth. Very impressive to see what goes into all of the amazing photographs a brand</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/2020-master-design-award-winner/">
<img width="921" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg 921w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1024x767.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1536x1151.jpg 1536w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8.jpg 1600w" sizes="(max-width: 921px) 100vw, 921px">
<h3>2020 Master Design Award Winner for Best Outdoor Environment</h3>
</a>
<p>We are so delighted to win another award for this stunning custom home in Fairview, North Carolina. The work we do represents the best of the best in design, materials, and talent. We thank everyone who helped put this project together. It is always a collaborative creative process that leaves us grateful and satisfied standing</p>
</li>
</ul>
</div>
</section>
[1]: https://i.stack.imgur.com/n4jOn.png
Ответ №1:
Используйте display: flex on .blog-list вместо display: grid , а затем добавьте a media query с разрешением около 550 пикселей и измените направление сгибания на column :
body {
margin: 0;
}
.blog-list {
display: flex;
margin: 0;
padding: 0;
}
.blog-list li {
padding: 10px;
list-style-type: none;
}
.blog-list a {
position: relative;
text-decoration: none;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
@media only screen and (max-width: 550px) {
.blog-list {
flex-direction: column;
}
}
@media only screen and (min-width: 980px) {
.blog-list h3 {
font-size: 2.4rem;
}
.blog-list a img {
transition: ease all 0.5s;
}
.blog-list a:hover {
opacity: .8;
}
.blog-list footer {
padding-bottom: 100px;
}
} <section class="generic">
<div class="inner">
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/">
<img src="https://bluestoneconst.wpengine.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-6.jpg" alt="">
<h3>Asheville, NC: The Best Place To Live If You Can Live Anywhere</h3>
</a>
<p>Experienced travelers know the best place to eat in Chicago, the best hotel to stay at in New York, the best place to watch the sunset over the Rocky Mountains, the best beach on the East Coast — you get the picture.amp;nbsp;But what about moving somewhere new? This requires a different set of criteria. Vacation</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/luxury-mens-brand-chooses-bluestone-home-for-fall-catalog-photo-shoot/">
<img width="920" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg 920w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction.jpg 1024w" sizes="(max-width: 920px) 100vw, 920px">
<h3>Luxury Men’s brand chooses Bluestone custom home for Fall catalog photo shoot</h3>
</a>
<p>After a 4 day photo shoot with luxury fashion brand Peter Millar at our client’s rustic custom home for their fall/ holiday luxury men’s apparel catalog, we got some fun aerial and ground shots of our own thanks to Carl Amoth. Very impressive to see what goes into all of the amazing photographs a brand</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/2020-master-design-award-winner/">
<img width="921" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg 921w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1024x767.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1536x1151.jpg 1536w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8.jpg 1600w" sizes="(max-width: 921px) 100vw, 921px">
<h3>2020 Master Design Award Winner for Best Outdoor Environment</h3>
</a>
<p>We are so delighted to win another award for this stunning custom home in Fairview, North Carolina. The work we do represents the best of the best in design, materials, and talent. We thank everyone who helped put this project together. It is always a collaborative creative process that leaves us grateful and satisfied standing</p>
</li>
</ul>
</div>
</section> Вот ссылка на мой Codepen: https://codepen.io/ajarrow/pen/oNxmxGr
Редактировать
После просмотра вашего веб-сайта, похоже, есть медиа-запрос с минимальной шириной 700px (любое устройство с шириной экрана более 700px, что было бы очень большим телефоном), который обрабатывает .blog-list элемент. При такой ширине blog-list элемент больше не имеет grid-column-gap defined, а столбцы по-прежнему равны трем столбцам. Поэтому, если вы добавите простой медиа-запрос, как показано ниже, он должен работать должным образом:
@media only screen and (max-width: 700px) {
.blog-list {
display: grid;
grid-template-columns: 1fr;
padding: 0 8px;
}
}
Кроме того, некоторые другие вещи, которые я заметил, находясь на вашем сайте:
Поле div с идентификатором site-frame имеет нижний край 515 пикселей, чтобы информация о местоположении / контакте внизу была видна, когда пользователь прокручивает страницу вниз. Это круто, за исключением того, что поле не удаляется, когда информация о местоположении / контакте перемещается внутри site-frame с разрешением 760 пикселей. Да, вы уже догадались … добавьте еще один медиа-запрос с максимальной шириной 760 пикселей:
@media only screen and (max-width: 760px) {
#site-frame {
margin-bottom: 0 !important;
}
}
И вы должны использовать !important , потому что исходное поле встроено, что переопределит все остальное, если вы не используете !important .
А затем изображения в разделе «Избранные проекты» прямо над разделом «Новости» растягивались и сжимались / перекрывались их родительским элементом. После кучи размышлений я исправил проблему с этим CSS:
.project-list a img {
max-height: 100%;
object-fit: contain;
max-width: 100% !important;
}
Это лишь некоторые вещи, которые я заметил, вы можете делать то, что хотите. Кроме того, я все еще не видел CSS, который я дал вам на днях … вы удалили его или он не проходит? Похоже, вы использовали WP…to добавьте пользовательский css, войдите в серверную часть своего сайта и, когда вы просматриваете главную страницу своего сайта, нажмите кнопку «Настроить» (значок кисти на мобильном устройстве) в строке заголовка вверху. Прокрутите страницу вниз, выберите «Дополнительный CSS» и вставьте поле кода слева. Дайте мне знать о результатах!
Редактировать
Очень простой способ добавить кнопки «Подробнее» — позаимствовать стиль из класса special-button (который используется на кнопке «Встретиться с нами» прямо под сообщениями) с a элементом:
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/" class="special-button">Read More</a>
Вам нужно будет добавить это внизу каждого сообщения и изменить href атрибут вручную. Более динамичным способом сделать это было бы добавить этот фрагмент javascript ПОСЛЕ сообщений в блоге:
<script>
document.querySelectorAll('.blog-list li a').forEach(function(item) {
var newA = document.createElement('a');
newA.href = item.href;
newA.classList = 'special-button';
newA.textContent = 'Read More';
item.parentElement.insertAdjacentElement('beforeend', newA);
});
</script>
Комментарии:
1. Спасибо за вашу помощь. Я добавил его на сайт, и он фактически разместил сообщения в блоге на весь экран, и они все еще находятся рядом на мобильных устройствах. Что я мог сделать не так? @ajarrow
2. Я просто просматривал ваш сайт, и он отлично работал для меня на мобильных устройствах… сообщения были собраны в столбец на мобильных устройствах и в строки на рабочем столе. Что именно вы хотели исправить?
3. Это все еще так на вашем мобильном устройстве? Это не укладывается на мой, и я очистил кеш… @ajarrow
4. Вы работаете над страницей «Новости», верно? Я не вижу ни одного из своих CSS на этой странице, я вижу оригинальный CSS, и он отлично работает на мобильных устройствах. Кроме того, HTML настроен иначе, чем то, что вы опубликовали здесь.
5. Нет, это на домашней странице, но в разделе «Последние новости» есть небольшой раздел из 3 сообщений в блоге. Это раздел, который не будет складываться